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 id="tooltip">hello there</nve-tooltip>
<nve-button interestfor="tooltip">button</nve-button>
Installation
Learn more about native Popover APIs.
<script type="module">
import '@nvidia-elements/core/tooltip/define.js';
</script>
<nve-tooltip id="tooltip">hello there</nve-tooltip>
<nve-button interestfor="tooltip">button</nve-button>
Visual
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">hello there</nve-tooltip>
<nve-button id="btn">button</nve-button>
Position
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.
Tooltip positioning options for optimal placement relative to trigger elements. Use different positions based on available screen space and content layout to ensure tooltips remain visible and don't obscure important content.
<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>
Alignment
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.
Fine-grained tooltip alignment combined with positioning for precise placement control. Use to align tooltips to specific edges of trigger elements, improving visual hierarchy and reducing overlap with other UI elements.
<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>
Events
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
Event handling for tooltip lifecycle events. Useful for adding custom behavior when tooltip state changes.
<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>
Open Delay
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.
Tooltip with delayed appearance to reduce visual noise during quick mouse movements. Use open-delay for better user experience when tooltips are dense, preventing tooltips from flashing during cursor transitions.
<nve-tooltip id="delay-tooltip" open-delay="500">delayed tooltip</nve-tooltip>
<nve-button interestfor="delay-tooltip">button</nve-button>
Dynamic Trigger
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.
<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>
Wrap
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.
<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>
Content
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 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>
Status
Tooltip with muted status variant for subtle, low-emphasis contextual information. Use muted tooltips when the information is supplementary and shouldn't draw attention away from primary content.
<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>
Hint
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 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>
Dynamic Anchor Position
A popover follows its assigned anchor event when the anchor position is dynamically changed.
@customElement('dynamic-anchor-position-demo')
class DynamicAnchorPositionDemo extends LitElement {
#anchor: Ref<HTMLElement> = createRef();
render() {
return html`
<div ${ref(this.#anchor)} id="anchor"></div>
<nve-tooltip anchor="anchor">tooltip</nve-tooltip>
`;
}
firstUpdated(props: PropertyValues<this>) {
super.firstUpdated(props);
this.addEventListener('mousemove', e => this.#anchor.value.style.inset = `${e.clientY - 15}px auto auto ${e.clientX - 15}px`);
}
}
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days