Vanilla UI Kit Tooltip v1.0.0 · toast →

Tooltips & popovers, one file.

Zero-dependency tooltips that follow your page's theme on their own. Hover, click, and tab through everything below — every card is live.

Placements

Four sides with auto-flip when there's no room, plus an arrow that tracks the trigger.

<button data-vtt="I'm on top"
        data-vtt-placement="top">

Triggers

Hover (also shows on keyboard focus), click, or focus-only — try tabbing through.

new Tooltip('#save', {
  trigger: 'click'   // hover | click | focus | manual
})

Interactive popover

The panel stays open while your pointer or focus is inside it, so it can hold links and buttons.

new Tooltip('#del', {
  trigger: 'click', interactive: true,
  content: function (el) { return panelEl }
})

HTML content

Content is text by default; html: true is an explicit opt-in for trusted markup.

new Tooltip('#hint', {
  html: true,
  content: 'Press <b>⌘S</b> to save'
})

Manual + API

trigger: 'manual' binds nothing — you drive it with show(), hide(), toggle().

var tip = new Tooltip('#el', {
  trigger: 'manual', content: '…' })
tip.toggle()

Headless & family theming

Tooltip.defaults.styles = false injects no CSS — the behavior and ARIA stay, the look is yours (see Tooltip.css for a starting point). With the VC core loaded, one call themes every family component.

<script src="https://cdn.jsdelivr.net/gh/vanilla-ui-kit/components/tooltip/tooltip.js"></script>
VC.config({ accent: '#b45309' })