Twitter Bootstrap Tooltips playing nice with SVG

First, read about Bootstrap tooltips and popovers on Bootstrap’s website.

---

Want to add a tooltip to an svg object?

Check out this question on Stack Overflow:

How do I show a bootstrap tooltip with an svg object.

Or, just jump right on ahead to the jsfiddle.

The essence of it boils down to using $('svg -whatever-').tooltip(-options-).

For example, if all you elements have class cells, then you would use something like

// title: compulsary if you want a non-empty tooltip
d3.selectAll('.cells').attr('title','This is my tooltip title');

// content: popovers only. 
d3.selectAll('.cells').attr('data-content','This is some content');

// set the options – read more on the Bootstrap page linked to above
$('svg .cells').popover({
   'trigger':'hover'
   ,'container': 'body'
   ,'placement': 'top'
   ,'white-space': 'nowrap'
   ,'html':'true'
});

---

Confused about how to add tooltips in general? Or just want to make your life easier and deal with them all at once?

Read this answer on Stack Overflow: Bootstrap 3.0 Popovers and Tooltips.

The gist of it:

$('[data-toggle="tooltip"]').tooltip({
    'placement': 'top'
});
$('[data-toggle="popover"]').popover({
    trigger: 'hover'
    ,'placement': 'top'
});

Using javascript to parse your URL into parts

Problem: Your site has a url that looks something like this: http://www.bart.gov/schedules/quickplanner?orig=12TH&addr1=&dest=16TH&addr2=&type=departure&date=2013-12-21&time=9%3A00%20am&tab=2

You want to break it down into parts, for reasons that I’ll leave to your imagination.

Turns out that all the info you need is conveniently stored in the window.location object. Here’s the keys stored in the window.location object:

ancestorOrigins
constructor
hash
host
hostname
href
origin
pathname
port
protocol
search

You can find out what each of them hold using this simple for loop:

//print out all window.location variables.
var loc = window.location;
for(var aKey in loc){
 console.log(aKey+":",loca[aKey]);
}

For example, if the url of the site is http://www.bart.gov/schedules/quickplanner
you’ll find that

window.location.protocol = "http"
window.location.host = "www.bart.gov"
window.location.pathname = "schedules/quickplanner

The window.location.search variable holds the part of the string that’s after the pathname.
That is, in the BART url above,

window.location.search = ?orig=12TH&addr1=&dest=16TH&addr2=&type=departure&date=2013-12-21&time=9%3A00%20am&tab=2;

You can parse it into parts like so:

function get_search_from_url  (query) {
  if(!query || query.length==0) return query; // empty query string was input.
  var query_string = {};
  // get rid of the '?' at the beginning
  query = query.chartAt(0)=='?' ? query.substring(1,query.length) : query;
  // get the different parts
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    pair[0] = decodeURIComponent(pair[0]);
    pair[1] = decodeURIComponent(pair[1]);
    	// If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
    	// If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
    	// If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
  return query_string;
};

It basically does the opposite of jquery’s .param function.

Exporting data from a web browser to a csv file using javascript.

If you want to skip all this text and just download a working example, go ahead and scroll to the end of this post. Otherwise, read on.

---

There is a comprehensive answer from Terry Young on Stack Overflow with accompanying fiddle here.

Works as you’d expect on Firefox 20 and Google Chrome 26. The file exports fine in Safari 6.0.5 but won’t name the file. Instead, it’ll save your file as ‘unknown’ (no file extension) so you’ll need to go in and rename it yourself if you’re constrained to Safari.

And then there’s this answer on Stack Overflow by adeneo. It’s a little less comprehensive but equally helpful depending on what you’re looking for. Here’s the fiddle. A rough idea of what the code looks like is shown below.

var A = [['n','sqrt(n)']];  // initialize array of rows with header row as 1st item
	 
for(var j=1;j<10;++j){ A.push([j, Math.sqrt(j)]) }

var csvRows = [];
for(var i=0,l=A.length; i<l; ++i){
	    csvRows.push(A[i].join(','));   // unquoted CSV row
}
var csvString = csvRows.join('\n');

var a = document.createElement('a');
a.href     = 'data:attachment/csv,' + csvString;
a.target   ='_blank';
a.download = 'myFile.csv,' + encodeURIComponent(csvString); ;
a.innerHTML = "Click me to download the file.";
document.body.appendChild(a);

Finally, here’s a link to a downloadable gist on GitHub if you want to just get up and running straight away. It’s based on Terry Young‘s answer but modified to include table headers, and refactored so anything that gets done more than once gets its own function.