Skip to main content
100%

jQuery UI Tooltip - Default functionality

✓ Published0🌍 Public
Aamithegde
Last edited Mar 7, 2014
Created on Mar 7, 2014

This example demonstrates a custom jQuery UI Tooltip interaction on a single input field. The tooltip appears on hover and remains visible when the user moves the mouse onto the tooltip itself, with a 100-millisecond delay before closing on mouse leave. The code uses jQuery’s `.tooltip()` API, custom `open` and `mouseleave` events, and global `mouseenter`/`mouseleave` handlers on `.ui-tooltip` to manage close timers. The tooltip’s title attribute provides the static text content, and all other tooltips are closed when a new one opens.

AI-generated description

Similar vizzes

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
66% match
Loading thumbnail…

Tooltip demo

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.

Aalex-r-bigelow
64% match
Loading thumbnail…

Tippy.js - Tooltip customization

This example demonstrates a minimal tooltip implementation using Tippy.js, showing a hover-triggered popup with the text “My tooltip!” styled with the “translusent” theme. The page loads Tippy.js and Popper.js from a CDN, and the tooltip is initialized with the `tippy()` function. A custom Poppins font is imported, and the button element with the id `tippy` serves as the trigger target. The underlying data visualization context appears limited, as the example focuses on tooltip customization rather than chart rendering.

SSubhendu Karmakar
64% 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
63% match
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
63% 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
62% 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
62% match
Loading thumbnail…

Gist 364813

This example implements a custom jQuery autocomplete widget with animated show-and-hide behavior. It uses `jQuery` methods such as `fadeTo`, `stop`, and `show` to control the visibility of a suggestion box, while handling keyboard navigation for arrow keys, tab, and enter. The code fetches suggestions via JSONP requests, renders them as list items, and tracks the selected index with `data`. Stippling effects—fade-in and fade-out—are applied through custom functions, though the code notes issues with animation state confusion. The source is a JavaScript file from a gist.

XXXX
62% match