Example of TnT Board showing how to configure tooltips on track elements.
xxxxxxxxxx
<head>
<!-- D3 -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<!-- TnT -->
<link rel="stylesheet" href="https://tntvis.github.io/tnt.board/build/tnt.board.css" type="text/css" />
<script src="https://tntvis.github.io/tnt.board/build/tnt.board.min.js"></script>
<!-- TnT Tooltip -->
<link rel="stylesheet" href="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css"/>
<script src="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script>
var myBoard = tnt.board().from(20).to(500).max(1000);
var axis_track = tnt.board.track()
.height(20)
.color("white")
.display(tnt.board.track.feature.axis()
.orientation("top")
);
var block_track = tnt.board.track()
.label("my track")
.height(30)
.color("#FFCFDD")
.data (tnt.board.track.data.sync()
.retriever (function () {
return [
{
start : 200,
end : 350
}
];
})
)
.display(tnt.board.track.feature.block()
.color("blue")
.on("click", function (d) {
tnt.tooltip.table()
.width(120)
.call(this, {
header: "Block",
rows: [
{"label":"start", "value":d.start},
{"label":"end", "value":d.end}
]
});
})
);
myBoard(document.getElementById("mydiv"));
myBoard
.add_track(axis_track)
.add_track(block_track);
myBoard.start();
</script>
</body>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://tntvis.github.io/tnt.board/build/tnt.board.min.js to a secure url
Modified http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://tntvis.github.io/tnt.board/build/tnt.board.min.js
https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js