DefaultVisualPositionAlignmentEventsContentDynamicTriggerHintStatusWrapAsyncTriggerPositionStrategyAbsoluteScrollContainerDynamicAnchorPositionLegacyDynamicTriggerLegacyTriggerLegacyBehaviorTriggerLegacyOpenDelayNestedDynamicInterestInvokersOpenDelayLegacyPopoverTarget
<nve-tooltip id="tooltip">hello there</nve-tooltip>
<nve-button interestfor="tooltip">button</nve-button>
Edit Example
A contextual popup that displays a plaintext description. Tooltips are triggered by hovering, focusing, or tapping an element and cannot have interactive elements within them. MDN Popover API
<nve-tooltip anchor="btn">hello there</nve-tooltip>
<nve-button id="btn">button</nve-button>
Edit Example
Tooltip using anchor attribute to reference the trigger element. Use when you need to explicitly connect tooltips to their triggers by ID for better control over relationships.
<nve-tooltip anchor="btn" position="top">top</nve-tooltip>
<nve-tooltip anchor="btn" position="right">right</nve-tooltip>
<nve-tooltip anchor="btn" position="bottom">bottom</nve-tooltip>
<nve-tooltip anchor="btn" position="left">left</nve-tooltip>
<nve-button id="btn">button</nve-button>
Edit Example
Determines the position of an element along both inline and block axis. MDN
Position Description center Centers the popover directly over the anchor element. top Positions the popover above the anchor element. bottom Positions the popover below the anchor element. left Positions the popover to the left side of the anchor element. right Positions the popover to the right side of the anchor element.
<nve-tooltip anchor="card" position="top" alignment="start">top start</nve-tooltip>
<nve-tooltip anchor="card" position="top">top center</nve-tooltip>
<nve-tooltip anchor="card" position="top" alignment="end">top end</nve-tooltip>
<nve-tooltip anchor="card" position="right" alignment="start">right start</nve-tooltip>
<nve-tooltip anchor="card" position="right">right center</nve-tooltip>
<nve-tooltip anchor="card" position="right" alignment="end">right end</nve-tooltip>
<nve-tooltip anchor="card" position="bottom" alignment="start">bottom start</nve-tooltip>
<nve-tooltip anchor="card" position="bottom">bottom center</nve-tooltip>
<nve-tooltip anchor="card" position="bottom" alignment="end">bottom end</nve-tooltip>
<nve-tooltip anchor="card" position="left" alignment="start">left start</nve-tooltip>
<nve-tooltip anchor="card" position="left">left center</nve-tooltip>
<nve-tooltip anchor="card" position="left" alignment="end">left end</nve-tooltip>
<nve-card id="card" style="width: 400px; height: 200px"></nve-card>
Edit Example
Determines the alignment of the popover relative to the provided anchor element.
Alignment Description start Aligns the popover to the beginning edge of the anchor for left or top alignment. end Aligns the popover to the ending edge of the anchor for right or bottom alignment. center Centers the popover along the anchor's edge for balanced positioning.
<nve-tooltip id="tooltip">hello there</nve-tooltip>
<nve-button interestfor="tooltip">button</nve-button>
<script type="module">
const tooltip = document.querySelector("nve-tooltip");
tooltip.addEventListener("beforetoggle", () => console.log("beforetoggle"));
tooltip.addEventListener("toggle", () => console.log("toggle"));
tooltip.addEventListener("close", () => console.log("close"));
tooltip.addEventListener("open", () => console.log("open"));
</script>
Edit Example
Event Description close Dispatched when the tooltip closes.
Dispatched when the tooltip opens.
Dispatched on a popover element just after showing or hiding. MDN
Dispatched on a popover just before showing or hiding. MDN
<nve-tooltip anchor="btn" position="bottom">
<h3 nve-text="label">Title</h3>
<p nve-text="body">some text content</p>
</nve-tooltip>
<nve-button id="btn">button</nve-button>
Edit Example
Tooltip with structured content including title and body text. Use for tooltips that need hierarchical information, but keep content brief to maintain tooltip's lightweight nature.
<nve-tooltip id="dynamic-popover"></nve-tooltip>
<div nve-layout="row gap:sm align:center">
<nve-button interestfor="dynamic-popover">one</nve-button>
<nve-button interestfor="dynamic-popover">two</nve-button>
<nve-button interestfor="dynamic-popover">three</nve-button>
</div>
<script type="module">
document.querySelector("#dynamic-popover").addEventListener("toggle", (e) => {
if (e.newState === "open") {
e.target.textContent = "tooltip " + e.source.textContent;
}
});
</script>
Edit Example
Single tooltip shared across many triggers with dynamic content updates. Use to reduce DOM nodes and improve performance when many similar elements need contextual help, updating tooltip content based on which trigger activated it.
<div nve-layout="row gap:xs align:vertical-center">
<h2 nve-text="heading sm">Preview</h2>
<nve-icon-button container="flat" icon-name="information-circle-stroke" interestfor="hint"></nve-icon-button>
<nve-tooltip id="hint" position="right">Preview in progress CI tasks for the active host</nve-tooltip>
</div>
Edit Example
Tooltip as a hint icon pattern for providing contextual help next to labels or headings. Perfect for explaining features or terminology without cluttering the main interface, allowing users to discover information on demand.
<div nve-layout="row align:center" style="height: 250px">
<nve-tooltip anchor="btn">default status</nve-tooltip>
<nve-tooltip anchor="btn" position="bottom" status="muted">muted status</nve-tooltip>
<nve-button id="btn">button</nve-button>
</div>
Edit Example
Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
Status Description muted
<nve-tooltip anchor="btn" style="--width: 200px">
Tooltips provide contextual help for interface elements. Keep content brief and descriptive to help users understand
available actions.
</nve-tooltip>
<nve-button id="btn">button</nve-button>
Edit Example
Tooltip with constrained width for controlled text wrapping. Use when tooltip content is longer than a single line, but prefer keeping tooltips brief for better scannability and user experience.
<div id="async-trigger-demo">
<nve-tooltip id="tooltip">hello there</nve-tooltip>
<template><nve-button interestfor="tooltip">button</nve-button></template>
</div>
<script type="module">
import '@nvidia-elements/core/button/define.js';
import '@nvidia-elements/core/tooltip/define.js';
const template = document.querySelector('#async-trigger-demo template');
const instance = template.content.cloneNode(true);
setTimeout(() => {
document.querySelector('#async-trigger-demo').appendChild(instance);
}, 1000);
</script>
Edit Example
Tooltip anchoring to a dynamically created anchor element.
<nve-button interestfor="tooltip">button</nve-button>
<nve-tooltip id="tooltip">hello there</nve-tooltip>
Edit Example
Tooltip with absolute positioning strategy for precise placement in complex layouts. Use when default fixed positioning causes issues with scrolling containers or nested positioning contexts.
<style>
#scroll-container {
display: flex;
flex-direction: column;
height: 300px;
width: 200px;
overflow-y: auto;
border: 1px solid #ccc;
margin: 20vh;
& > button {
min-height: 50px;
width: 100%;
}
}
</style>
<section id="scroll-container">
<button interestfor="tooltip">1</button>
<button interestfor="tooltip">2</button>
<button interestfor="tooltip">3</button>
<button interestfor="tooltip">4</button>
<button interestfor="tooltip">5</button>
<button interestfor="tooltip">6</button>
<button interestfor="tooltip">7</button>
<button interestfor="tooltip">8</button>
<button interestfor="tooltip">9</button>
<button interestfor="tooltip">10</button>
</section>
<nve-tooltip id="tooltip" position="left">hello there</nve-tooltip>
Edit Example
Tooltip behavior within scrollable containers with automatic repositioning. Tooltips maintain visibility and proper positioning even when anchor elements scroll, ensuring consistent user experience in scrollable interfaces.
<dynamic-anchor-position-demo></dynamic-anchor-position-demo>
Edit Example
Tooltip that follows a dynamically positioned anchor element. Real-time tooltip repositioning as the anchor moves, useful for cursor-following tooltips or drag-and-drop interfaces.
<div id="dynamic-trigger-demo" nve-layout="row align:center" style="height: 250px">
<nve-tooltip behavior-trigger hidden>hello there</nve-tooltip>
<div nve-layout="row gap:xl">
<nve-button>button</nve-button>
<nve-button>button</nve-button>
<nve-button>button</nve-button>
</div>
<script type="module">
const tooltip = document.querySelector("#dynamic-trigger-demo nve-tooltip");
document.querySelector("#dynamic-trigger-demo").addEventListener("mouseover", (e) => {
if (e.target.tagName === "NVE-BUTTON") {
tooltip.anchor = e.target;
tooltip.trigger = e.target;
}
});
</script>
</div>
Edit Example
Legacy pattern for dynamic tooltip triggers using behavior-trigger attribute. Programmatic anchor and trigger reassignment for backward compatibility with older implementations.
<div nve-layout="row align:center" style="height: 250px">
<nve-tooltip anchor="action-btn" trigger="action-btn" hidden>hello there</nve-tooltip>
<nve-button id="action-btn">button</nve-button>
<script type="module">
const tooltip = document.querySelector('nve-tooltip[anchor="action-btn"]');
tooltip.addEventListener("close", () => (tooltip.hidden = true));
tooltip.addEventListener("open", () => (tooltip.hidden = false));
</script>
</div>
Edit Example
Legacy trigger pattern with manual event handling and hidden attribute management. Older implementation approach for backward compatibility; prefer using popovertarget for new implementations.
<nve-tooltip behavior-trigger anchor="action-btn" trigger="action-btn" hidden>hello there</nve-tooltip>
<nve-button id="action-btn">button</nve-button>
Edit Example
Legacy behavior-trigger pattern for automatic tooltip lifecycle management. Deprecated approach that auto-manages visibility, prefer modern popovertarget API for new implementations.
<nve-tooltip behavior-trigger anchor="delay-tooltip-1" trigger="delay-tooltip-1" open-delay="500" hidden
>delayed tooltip</nve-tooltip
>
<nve-button id="delay-tooltip-1">button</nve-button>
<nve-tooltip behavior-trigger anchor="delay-tooltip-2" trigger="delay-tooltip-2" open-delay="500" hidden
>delayed tooltip</nve-tooltip
>
<nve-button id="delay-tooltip-2">button</nve-button>
<nve-tooltip behavior-trigger anchor="delay-tooltip-3" trigger="delay-tooltip-3" open-delay="500" hidden
>delayed tooltip</nve-tooltip
>
<nve-button id="delay-tooltip-3">button</nve-button>
Edit Example
Legacy implementation combining behavior-trigger with open-delay for many tooltips. Older pattern for delayed tooltip appearance; prefer modern popovertarget with open-delay attribute.
<nve-button popovertarget="dialog">open</nve-button>
<nve-dialog id="dialog" size="lg" modal closable>
<nve-button interestfor="tooltip">button</nve-button>
<section>
<button interestfor="tooltip">button</button>
</section>
</nve-dialog>
<nve-tooltip id="tooltip">test</nve-tooltip>
Edit Example
Tooltip functionality within modal dialogs with many triggers. Ensures tooltips work correctly in layered UI contexts, maintaining proper stacking order and interaction behavior within modal overlays.
<section nve-layout="row gap:md align:center">
<button popovertarget="dropdown" interestfor="tooltip">open</button>
<nve-button popovertarget="dropdown" interestfor="tooltip">open</nve-button>
<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
<nve-tooltip id="tooltip">tooltip content</nve-tooltip>
<div id="div">static</div>
<nve-tooltip trigger="div" hidden>static</nve-tooltip>
</section>
Edit Example
Tooltip functionality using interest invokers to control tooltip visibility on hover and focus.
<nve-tooltip id="delay-tooltip" open-delay="500">delayed tooltip</nve-tooltip>
<nve-button interestfor="delay-tooltip">button</nve-button>
Edit Example
Sets the delay in milliseconds before the element emits a open event.
OpenDelay Description number 0 Keyboard focus interactions (always immediate for accessibility). 500 Dense interfaces with many tooltips to reduce visual noise and prevent accidental triggers.
<nve-button popovertarget="tooltip">open</nve-button>
<nve-tooltip id="tooltip">tooltip content</nve-tooltip>
Edit Example
Legacy behavior that allowed tooltip triggering via popovertarget attribute instead of interestfor attribute with hover events.