Skip to main content
100%

Tooltip demo

✓ Published0🌍 Public
Aalex-r-bigelow
Last edited May 20, 2019
Created on May 20, 2019

This demo showcases a reusable tooltip function for D3 v5 that positions an HTML tooltip relative to a target element without occluding it. The tooltip accepts either static HTML strings or JavaScript functions to populate its content, with customizable anchoring and automatic clamping to keep it within the viewport. Two hoverable divs demonstrate the tooltip in action, while the underlying `showTooltip` and `hideTooltip` functions handle positioning, click-outside dismissal, and timed hiding via `window.setTimeout`. The tooltip div is styled with CSS and positioned absolutely using the `getBoundingClientRect` API.

AI-generated description

A semi-smart function for displaying tooltips with D3.js

Functions

<dl> <dt><a href="#showTooltip">showTooltip([parameters])</a></dt> <dd><p>Shows a tooltip; assumes the existence of a div with <code>id=&quot;tooltip&quot;</code>, that is positioned absolutely</p> </dd> <dt><a href="#hideTooltip">hideTooltip()</a></dt> <dd><p>Shorthand for hiding the tooltip</p> </dd> </dl>

<a name="showTooltip"></a>

showTooltip([parameters])

Shows a tooltip; assumes the existence of a div with id="tooltip", that is positioned absolutely

Kind: global function

Param Type Default Description
[parameters] <code>Object</code> <code>{}</code> Parameter object
[parameters.content] <code>String</code> <code>''</code> 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] <code>Object</code> <code></code> Specifies a bounding box that the tooltip should NOT occlude (typically, the results of a getBoundingClientRect() call)
[parameters.anchor] <code>Object</code> <code></code> 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] <code>Number</code> <code>1000</code> Hides the tooltip after a certain delay; set this to zero to disable hiding

<a name="hideTooltip"></a>

hideTooltip()

Shorthand for hiding the tooltip

Kind: global function

mit Licensed

Similar vizzes

Loading thumbnail…

Tooltip

This example demonstrates a customizable tooltip system built with D3 v4, showing how tooltips can appear in different positions relative to hovered elements. It renders a grid of small aqua squares, and hovering over any square changes its color to orange while displaying a tooltip with contextual information about that specific item, such as its number, whether it is even, and its prime status. The tooltip’s appearance and behavior—including direction, color, content rows, and arrow styling—are configured through a reusable `d3.componentsTooltip` API, with live code editing via CodeMirror. The implementation uses SVG rendering and mouse event handlers to trigger tooltip visibility.

663anp3ca
81% match
Loading thumbnail…

Tooltip example

This example demonstrates a basic tooltip interaction: hovering over a green circle reveals a text box that follows the mouse cursor. The tooltip is created as a separate HTML `div` element positioned relative to the page. The code uses `d3.select` to append an SVG circle and the tooltip div, and employs the `.on("mouseover")`, `.mousemove`, and `.mouseout` event handlers with `tooltip.style` to control visibility and position based on `event.pageX` and `event.pageY`. It runs on d3.v7 and renders all visual elements as SVG.

Mma-jacobs
80% match
Loading thumbnail…

Tooltip

A single SVG circle serves as the target for an HTML tooltip built with D3.js v5. The tooltip, styled with absolute positioning and a border, appears on mouseover, follows the cursor via mousemove events, and hides on mouseout. It contains an image and styled text, demonstrating how D3 can manage interactive HTML overlays alongside SVG shapes. The example uses D3's selection and event handling methods on the circle's ID.

Mmachetenwueter
79% match
Loading thumbnail…

Reusable D3 Tooltip

This example demonstrates a reusable tooltip function for D3 v4 bar charts, built with SVG. The tooltip, defined in tooltip.js, displays data attributes (name, description) in a styled black rounded rectangle with white text. It tracks mouse position to position itself within a defined extent, flipping sides dynamically based on cursor quadrant. The bar chart itself uses dummy data with categorical x-axis and linear y-axis, and the tooltip is attached to each bar via `.each(tooltip.events)`, preserving any other event listeners. The function is highly configurable through methods like `.tips()`, `.fontSize()`, `.padding()`, and `.margin()`, making it reusable across charts.

663anp3ca
79% match
Loading thumbnail…

Reusable D3 Tooltip

This example demonstrates a reusable tooltip function for D3 charts, built with D3 v4 and rendered as SVG. The tooltip is designed to be attached to any chart element via a `.each(tooltip.events)` call, and it displays multiple data properties with customizable labels and formatting. It supports configurable extent, font size, padding, and margin, and includes mouseenter, mouseleave, and mousemove event handlers. The bar chart uses sample water-quality data, with categorical colors from d3.schemeCategory20 and axis scales for parameters and values. The tooltip appears on hover, showing the parameter value and site name. The code is organized as a reusable function in `tooltip.js`, with the chart and dummy data in `index.html`, and styling in `index.css`. This example demonstrates a modular approach to tooltip implementation in D3 v4 using SVG, useful for adding interactive tips to charts without overwriting existing event handlers.

Aabrown004
79% match
Loading thumbnail…

Simple D3 tooltip

This example demonstrates a minimal tooltip interaction in D3.js, showing how a simple text label appears and follows the mouse cursor when hovering over a circle. The code uses D3 v5 to append a hidden div as the tooltip and positions it dynamically on mouse events. It employs `mouseover`, `mousemove`, and `mouseout` handlers to control visibility and track the pointer coordinates via `event.pageY` and `event.pageX`. The circle is drawn with an SVG `circle` element, styled with a black stroke and aliceblue fill, inside a 300-by-300-pixel SVG container.

GGerardoFurtado
77% match
Loading thumbnail…

Tooltip example

This example demonstrates a simple tooltip implemented as an SVG `<title>` element attached to a circle shape. The circle, with a radius of 200 pixels, is positioned at coordinates (250, 250) inside an SVG canvas of 960 by 500 pixels. The code uses D3 v6’s selection and `append` methods to create the circle and its child `<title>` node, which displays the static text “It Works” on hover. No data source is involved; the visualization relies entirely on D3’s DOM manipulation and SVG rendering.

NNita
77% match
Loading thumbnail…

T3 Tool Tip Template

This example demonstrates a reusable tooltip system for data visualizations, where hovering over 50 randomly positioned circles displays their x, y, and id properties in a floating HTML div. The tooltip intelligently flips its position near the window edges using mouse coordinates from the d3.pointer API. The implementation uses D3 v6 selection methods like .on mouse events and .join for dynamic content, while custom CSS styling creates the visual tooltip appearance. The SVG-rendered circles change color from gray to magenta when hovered, with tooltip contents generated from each data object's entries.

Aadventuresenglish.info@gmail.com
77% match