Tip: Enable Tooltips in Custom Visualizations - mstr-dev/Visualization-Plugins-Deprecated GitHub Wiki

Tooltips are small overlays that present data details. Here, we recommend several easy and customizable ways that can provide tooltips.

Default Browser Tooltips

This is very easy to implement, and the browser manages the placements for you, you can customize text, but with no control over how they look.

You can simply inject a title element into the object should have the tooltip applied. For example, after we create all those rects:

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
   ...

we can just tack on to the end of that chain:

	.append("title")
    .text(functoin(d) {
   		return d;  //or return whatever text you would like
   });

SVG Element Tooltips

With SVG elements, you can add more controls over your tooltips.

One way to add tooltips is to add event listeners like that, on mouseover we create a new data label and destroy it on mouseout. Or we can generate all the data labels and show or hide them based on mouse hover status. Or just create one data label, and modify its text and position when used.

.on("mouseover", function(d) {

//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) + 14;

//Create the tooltip label
svg.append("text")
  .attr("id", "tooltip")
  .attr("x", xPosition)
  .attr("y", yPosition)
  .attr("text-anchor", "middle")
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("font-weight", "bold")
  .attr("fill", "black")
  .text(d);

})

.on("mouseout", function() {

//Remove the tooltip
d3.select("#tooltip").remove();

})

HTML div Tooltips

A similar approach can be used with HTML div elements as tooltips. You might consider using a div when:

You want to achieve a visual effect that isn't possible or well-supported with SVG(such as CSS drop shadows)
You need the tooltips to extend beyond the frame of the SVG image

Take following code as an example:

//CSS
<div id="tooltip" class="hidden">
        <p><strong>Important Label Heading</strong></p>
        <p><span id="value">100</span>%</p>
</div>
#tooltip {
        position: absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
}

#tooltip.hidden {
        display: none;
}

#tooltip p {
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
        line-height: 20px;
}

//Javasript
.on("mouseover", function(d) {

//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) / 2 + h / 2;

//Update the tooltip position and value
d3.select("#tooltip")
  .style("left", xPosition + "px")
  .style("top", yPosition + "px")
  .select("#value")
  .text(d);

//Show the tooltip
d3.select("#tooltip").classed("hidden", false);

})
.on("mouseout", function() {

//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);

})

Other Methods

Tipsy

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag's title attribute.

d3.tip

Click here to learn the examples of d3.tip.