Overlays

Tooltip

Quanta tooltips are simple, styled popups that appear when users hover or focus on an element. Built for flexibility and clarity.

Basic Usage

Wrap the trigger element and include a tooltip absolutely positioned nearby. Show/hide using JS.

<div class="relative" style="display: inline-block;">
  <button class="quanta-btn quanta-btn-primary" data-tooltip="">Hover Me</button>
</div>

Dark Mode

Tooltips flip to a white background with dark text in dark mode automatically.

• Tooltip background switches to --white.
• Text becomes --black.
• The pointer triangle updates accordingly.