1. Docs
2. Components
3. Tooltips

Tooltips

Lightweight text hints on hover/focus. Available as the <velin-tooltip-wc> web component or the pure-CSS .velin-tooltip class.

CSS tooltip

Add .velin-tooltip to the parent and use data-tooltip for the text.

<span class="velin-tooltip" data-tooltip="Hello from a tooltip!">
  Hover me
</span>

Web component

Use <velin-tooltip-wc> for dynamic positioning with automatic flip.

<velin-tooltip-wc content="Tooltip text" placement="top">
  <button class="velin-btn velin-btn-secondary">Hover me</button>
</velin-tooltip-wc>

Placements

Supported placements: top (default), right, bottom, left.

<span class="velin-tooltip" data-tooltip="Top" data-tooltip-placement="top">Top</span>
<span class="velin-tooltip" data-tooltip="Right" data-tooltip-placement="right">Right</span>
<span class="velin-tooltip" data-tooltip="Bottom" data-tooltip-placement="bottom">Bottom</span>
<span class="velin-tooltip" data-tooltip="Left" data-tooltip-placement="left">Left</span>

Flip behaviour

The <velin-tooltip-wc> component automatically flips placement when there isn't enough space in the preferred direction. This is powered by viewport boundary detection.

<!-- Will flip from top to bottom if near the top edge -->
<velin-tooltip-wc content="I flip!" placement="top" flip>
  <button class="velin-btn velin-btn-outline-primary">Near edge</button>
</velin-tooltip-wc>

CSS variables

.velin-tooltip,
velin-tooltip-wc {
  --velin-tooltip-bg: #1a1a2e;
  --velin-tooltip-color: #fff;
  --velin-tooltip-padding: .35rem .65rem;
  --velin-tooltip-radius: .375rem;
  --velin-tooltip-font-size: .8125rem;
  --velin-tooltip-z-index: 1080;
}