Skip to main content
SimilarExport ZIP
100%

Absolute-Positioned Tooltip

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jul 17, 2011

This example demonstrates an SVG rectangle that displays an absolute-positioned tooltip showing the cursor’s page coordinates. A mouseover event reveals a gray div, mousemove updates its text and left/top style properties with d3.event.pageX and pageY, and mouseout hides it. It uses d3.select, d3.append, and d3.event APIs from d3.v3.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

tooltips

This example demonstrates a simple tooltip that appears when the user hovers over a circle in an SVG. The tooltip is a div element created with d3.select that becomes visible on mouseover, follows the cursor using page coordinates on mousemove, and hides on mouseout. The code uses D3 v7 to append an SVG circle with specified stroke, fill, radius, and position attributes, and binds the mouse events directly to that circle. The tooltip’s text is static, and no external data source is used.

Wwjj1928
77% 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
77% 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
77% 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
76% match
Loading thumbnail…

d3.js: show tooltip in absolutely positioned DIV, which position is calculated taking screen size+scroll into consideration

This example demonstrates a d3.js treemap that displays a tooltip in an absolutely positioned DIV, with its placement calculated according to the current screen size and scroll position. The treemap renders hierarchical JSON data as colored SVG rectangles with text labels. On mousemove, the code uses d3.mouse and custom position calculations to determine whether to align the tooltip to the left or right and top or bottom of the cursor, ensuring it stays visible within the viewport. The tooltip’s visibility toggles on mouseout. The implementation relies on d3.layout.treemap and manual DOM offset tracking.

GGerHobbelt
75% match
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
74% 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
73% match
Loading thumbnail…

D3 Starter

This example demonstrates a minimal D3 starter project that renders a single rotated red SVG rectangle, with an interactive tooltip that appears on mouseover. The page uses D3 v7, imported via a bundled script, to select the body element and append both the SVG and a tooltip div. JavaScript event handlers on the rectangle trigger D3 selections and transitions to control the tooltip’s opacity and text content, while the tooltip’s position is set using the event’s page coordinates. The visualization is purely static apart from this interaction, showcasing basic SVG drawing and event handling in D3.

Mma-jacobs
73% match