Tooltip

vel-src: tooltip.css

CSS-only tooltips using the data-tooltip attribute. Position is controlled with data-tooltip-pos. Color variants are available for primary, success, and danger.

Class	Properties
data-tooltip="text"	Activates tooltip — text content shown via attr() in ::before pseudo-element
data-tooltip-pos="top"	Tooltip appears above the element (default)
data-tooltip-pos="bottom"	Tooltip appears below the element
data-tooltip-pos="left"	Tooltip appears to the left
data-tooltip-pos="right"	Tooltip appears to the right
vel-tooltip-primary	Primary purple tooltip background
vel-tooltip-success	Success green tooltip background
vel-tooltip-danger	Danger red tooltip background

Examples

Basic tooltip (hover to see)

example.html

<div style="padding:48px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;justify-content:center;">
  <button class="vel-btn vel-btn-secondary" data-tooltip="This is a tooltip">Hover me</button>
</div>

Positions

example.html

<div style="padding:48px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
  <button class="vel-btn vel-btn-secondary" data-tooltip="Top tooltip" data-tooltip-pos="top">Top</button>
  <button class="vel-btn vel-btn-secondary" data-tooltip="Bottom tooltip" data-tooltip-pos="bottom">Bottom</button>
  <button class="vel-btn vel-btn-secondary" data-tooltip="Left tooltip" data-tooltip-pos="left">Left</button>
  <button class="vel-btn vel-btn-secondary" data-tooltip="Right tooltip" data-tooltip-pos="right">Right</button>
</div>

Color variants

example.html

<div style="padding:48px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
  <button class="vel-btn vel-btn-secondary vel-tooltip-primary" data-tooltip="Primary">Primary</button>
  <button class="vel-btn vel-btn-secondary vel-tooltip-success" data-tooltip="Success">Success</button>
  <button class="vel-btn vel-btn-secondary vel-tooltip-danger" data-tooltip="Danger">Danger</button>
</div>