Skip to content

Instantly share code, notes, and snippets.

@emepyc

emepyc/README.md

Last active October 10, 2018 08:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emepyc/b5217a146bcf66d15a2a to your computer and use it in GitHub Desktop.
Save emepyc/b5217a146bcf66d15a2a to your computer and use it in GitHub Desktop.
Download ZIP
Custom tooltip
Raw
README.md

TnT Tooltip example created using the generic tooltip interface.

Raw
index.html
<!DOCTYPE html>
<head>
<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css"/>
<script src="http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js"></script>
</head>
<body>
<div id="container" style="padding:30px; position:relative" ></div>
<script>
var custom_tooltip = tnt.tooltip()
.width(150)
.fill (function (data) {
// The DOM element is passed as "this"
var container = d3.select(this);
var table = container
.append("table")
.attr("class", "tnt_zmenu")
.attr("border", "solid")
.style("width", custom_tooltip.width() + "px");
if (data.header) {
table
.append("tr")
.attr("class", "tnt_zmenu_header")
.append("th")
.text(data.header);
}
if (data.body) {
table
.append("tr")
.attr("class", "tnt_zmenu_row")
.append("td")
.style("text-align", "center")
.html(data.body);
}
});
d3.select("#container")
.append("svg")
.attr("width", 300)
.attr("height", 300)
.append("circle")
.datum({
header:"this is the header",
body:"this is the body"
})
.attr("cx", 150)
.attr("cy", 150)
.attr("r", 50)
.attr("fill", "red")
.on("click", function (d) {
custom_tooltip.call(this, d);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment