Created
March 10, 2016 08:20
-
-
Save emepyc/d42fefd3392717c6c7ff to your computer and use it in GitHub Desktop.
inject custom html in tooltip
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Example of injecting html into the body of a tooltip (either by passing the html as a string or by injecting DOM directly) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| </head> | |
| <body> | |
| <div> | |
| <div id="container" style="position:relative"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // Option1: Injecting any html string in the body | |
| var t = function (node) { | |
| var obj = {}; | |
| obj.header = "NAmE"; // If commented, doesn't show header | |
| obj.body = "<p>Hello world</p>"; | |
| tooltip.plain() | |
| .width(180) | |
| .call (this, obj); | |
| }; | |
| // Option2: Injecting DOM directly | |
| var t2 = function (node) { | |
| var obj = {}; | |
| obj.header = "NAmE"; | |
| obj.body = "<div id='tooltipContent'></div>"; // Only create a container to inject the content later | |
| tooltip.plain() | |
| .width(180) | |
| .call (this, obj); | |
| // At this point, the tooltip is rendered and we can use the container to inject what we want | |
| // Create the content and inject it in the tooltip | |
| // This can even happen asynchronously | |
| var p = document.createElement("p"); | |
| var t = document.createTextNode("Hello world!!"); | |
| p.appendChild(t); | |
| d3.select("#tooltipContent").node().appendChild(p) | |
| } | |
| var container = d3.select("#container"); | |
| container | |
| .append("svg") | |
| .attr("width", 300) | |
| .attr("height", 300) | |
| .append("circle") | |
| .attr("cx", 150) | |
| .attr("cy", 150) | |
| .attr("r", 50) | |
| .attr("fill", "red") | |
| // .on("click", t); | |
| .on("click", t2); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment