Skip to content

Instantly share code, notes, and snippets.

@karthiir

karthiir/.block

Created March 12, 2017 11:47
Show Gist options
  • Save karthiir/274d4af5df6486906196a503a5f3cc08 to your computer and use it in GitHub Desktop.
Save karthiir/274d4af5df6486906196a503a5f3cc08 to your computer and use it in GitHub Desktop.
Download ZIP
Table tooltip example
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<script src="http://d3js.org/d3.v3.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>
<style>
.tnt_zmenu_header {
background-color: steelblue;
color : white;
}
</style>
</head>
<body>
<div id="container" style="padding:30px; position:relative" ></div>
<script>
var t = function (data) {
var obj = {};
obj.header = data.name;
obj.rows = [];
obj.rows.push({
"label" : "First section",
"value" : ""
});
obj.rows.push({
"label" : "type",
"value" : data.type
});
obj.rows.push({
"label" : "Second section",
"value" : ""
});
obj.rows.push({
"label" : "field1",
"value" : "value1"
});
obj.rows.push({
"label" : "field2",
"value" : "value2"
})
tooltip.table()
.width(180)
.call (this, obj);
};
d3.select("#container")
.append("svg")
.attr("width", 300)
.attr("height", 300)
.append("circle")
.datum({name:"this is me", type:"this is my type"})
.attr("cx", 150)
.attr("cy", 150)
.attr("r", 50)
.attr("fill", "red")
.on("click", t);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment