Tooltip
CSS-only tooltips triggered on hover or :focus-visible. Wrap the target in .nf-tooltip-wrap and place .nf-tooltip as a sibling inside it.
Default (top)
TOP TOOLTIP
NODE_DETAILS
<span class="nf-tooltip-wrap">
<button class="nf-button nf-button-ghost">HOVER_ME</button>
<span class="nf-tooltip">NODE_DETAILS</span>
</span>Positions
BOTTOM
BELOW
<span class="nf-tooltip-wrap">
<button class="nf-button nf-button-ghost">HOVER_ME</button>
<span class="nf-tooltip nf-tooltip-bottom">BELOW</span>
</span>LEFT
LEFT
<span class="nf-tooltip-wrap">
<button class="nf-button nf-button-ghost">HOVER_ME</button>
<span class="nf-tooltip nf-tooltip-left">LEFT</span>
</span>RIGHT
RIGHT
<span class="nf-tooltip-wrap">
<button class="nf-button nf-button-ghost">HOVER_ME</button>
<span class="nf-tooltip nf-tooltip-right">RIGHT</span>
</span>On any element
The wrapper is display: inline-flex so it works on any inline element — buttons, icons, links, badges:
<span class="nf-tooltip-wrap">
<span class="nf-badge nf-badge-error">ERR</span>
<span class="nf-tooltip">AUTHENTICATION_FAILED</span>
</span>Class reference
| Class | Description |
|---|---|
nf-tooltip-wrap |
inline-flex wrapper — triggers tooltip on hover / focus |
nf-tooltip |
Tooltip bubble — appears above by default |
nf-tooltip-bottom |
Positions below the target |
nf-tooltip-left |
Positions left of the target |
nf-tooltip-right |
Positions right of the target |