A semi-smart function for displaying tooltips with D3.js
Shows a tooltip; assumes the existence of a div with id="tooltip", that is
positioned absolutely
Shorthand for hiding the tooltip
Shows a tooltip; assumes the existence of a div with id="tooltip", that is
positioned absolutely
Kind: global function
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| [parameters] | Object | {} | Parameter object |
| [parameters.content] | String | '' | The message that will be displayed. Can be an empty string (hides the tooltip), a non-empty HTML string, or a function (which is called with the d3-selected tooltip div as the first argument) |
| [parameters.targetBounds] | Object | | Specifies a bounding box that the tooltip should NOT occlude (typically, the results of a getBoundingClientRect() call) |
| [parameters.anchor] | Object | | Specifies -1 to 1 positioning of the tooltip relative to targetBounds; for example, { x: -1 } right-aligns the tooltip to the left edge of targetBounds, { x: 0 } centers the tooltip horizontally, and { x: 1 } left-aligns the tooltip to the right edge of targetBounds |
| [parameters.hideAfterMs] | Number | 1000 | Hides the tooltip after a certain delay; set this to zero to disable hiding |
Shorthand for hiding the tooltip
Kind: global function
xxxxxxxxxx<html> <head> <meta charset="UTF-8"> <title>Tooltip demo</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script> <script type="module" src="script.js"></script> </head> <body> Page contents go here <div id="htmlTooltip" class="hoverable">HTML tooltip</div> <div id="jsTooltip" class="hoverable">JS tooltip</div> <!-- the gl_keep class is important for goldenlayout popouts, if you use them --> <div id="tooltip" class="gl_keep" style="display:none"></div> </body></html> https://d3js.org/d3.v5.min.js