Tooltip

Tooltips are small descriptive messages that clarify an element’s function. Render a .ro-tooltip bubble in your markup (or create one in JavaScript on hover/focus).

Examples

Basic tooltip

<div class="ro-tooltip">Basic tooltip</div>

Preview

Basic tooltip

Arrow placement

Add .ro-tooltip-arrow and a side class (.ro-side-top, .ro-side-bottom, .ro-side-left, .ro-side-right) to control arrow direction in static markup.

<div class="ro-tooltip ro-side-top">
  <span>top tooltip</span>
  <svg width="12" height="6" viewBox="0 0 12 6" preserveAspectRatio="none" class="ro-tooltip-arrow">
  <path d="M0 0L6 6L12 0"></path>
</svg>
</div>

<div class="ro-tooltip ro-side-bottom">
  <span>bottom tooltip</span>
  <svg width="12" height="6" viewBox="0 0 12 6" preserveAspectRatio="none" class="ro-tooltip-arrow">
  <path d="M0 0L6 6L12 0"></path>
</svg>
</div>

<div class="ro-tooltip ro-side-left">
  <span>left tooltip</span>
  <svg width="12" height="6" viewBox="0 0 12 6" preserveAspectRatio="none" class="ro-tooltip-arrow">
  <path d="M0 0L6 6L12 0"></path>
</svg>
</div>

<div class="ro-tooltip ro-side-right">
  <span>right tooltip</span>
  <svg width="12" height="6" viewBox="0 0 12 6" preserveAspectRatio="none" class="ro-tooltip-arrow">
  <path d="M0 0L6 6L12 0"></path>
</svg>
</div>

Preview

top tooltip

bottom tooltip

left tooltip

right tooltip

Adaptive mode

Add .ro-mode-adaptive on .ro-tooltip for adaptive glass colors — useful on mixed or photographic backgrounds. This swaps --ro-tooltip-glass-color, --ro-tooltip-glass-bg, and --ro-tooltip-glass-border-gradient.

<div class="ro-tooltip ro-mode-adaptive ro-side-top">
<span>top tooltip</span>
<svg width="12" height="6" viewBox="0 0 12 6" preserveAspectRatio="none" class="ro-tooltip-arrow">
  <path d="M0 0L6 6L12 0"></path>
</svg>
</div>

<div class="ro-tooltip ro-mode-adaptive ro-side-bottom">
<span>bottom tooltip</span>
<svg width="12" height="6" viewBox="0 0 12 6" preserveAspectRatio="none" class="ro-tooltip-arrow">
  <path d="M0 0L6 6L12 0"></path>
</svg>
</div>

<div class="ro-tooltip ro-mode-adaptive ro-side-left">
<span>left tooltip</span>
<svg width="12" height="6" viewBox="0 0 12 6" preserveAspectRatio="none" class="ro-tooltip-arrow">
  <path d="M0 0L6 6L12 0"></path>
</svg>
</div>

<div class="ro-tooltip ro-mode-adaptive ro-side-right">
<span>right tooltip</span>
<svg width="12" height="6" viewBox="0 0 12 6" preserveAspectRatio="none" class="ro-tooltip-arrow">
  <path d="M0 0L6 6L12 0"></path>
</svg>
</div>

Preview

top tooltip

bottom tooltip

left tooltip

right tooltip

Vanilla JavaScript

Tooltips have no open/close class in CSS — create and destroy (or show/hide) a .ro-tooltip element in response to mouseenter / focus on the trigger:

Concern	What to toggle
Visibility	Append/remove the .ro-tooltip node, or toggle display / opacity
Arrow side	Set .ro-side-top, .ro-side-bottom, .ro-side-left, or .ro-side-right on the bubble
Adaptive colors	Add .ro-mode-adaptive on the bubble
Position	Set position: fixed + left / top from the trigger’s getBoundingClientRect(), or use Floating UI

const trigger = document.querySelector('.my-trigger');
let tooltip = null;

function showTooltip() {
  tooltip = document.createElement('div');
  tooltip.className = 'ro-tooltip ro-side-top'; // arrow side class
  tooltip.innerHTML = `
    Help text
    <svg width="12" height="6" viewBox="0 0 12 6" class="ro-tooltip-arrow">
      <path d="M0 0L6 6L12 0"></path>
    </svg>
  `;
  document.body.appendChild(tooltip);

  const rect = trigger.getBoundingClientRect();
  // Position above the trigger (adjust per ro-side-* class)
  tooltip.style.position = 'fixed';
  tooltip.style.left = `${rect.left + rect.width / 2}px`;
  tooltip.style.top = `${rect.top - 8}px`;
  tooltip.style.transform = 'translate(-50%, -100%)';
}

function hideTooltip() {
  tooltip?.remove();
  tooltip = null;
}

trigger.addEventListener('mouseenter', showTooltip);
trigger.addEventListener('mouseleave', hideTooltip);
trigger.addEventListener('focus', showTooltip);
trigger.addEventListener('blur', hideTooltip);

CSS classes & variables

Classes

Class	Description
.ro-tooltip	Tooltip bubble (glassmorphism surface).
.ro-tooltip-arrow	Arrow element pointing at the trigger.
.ro-side-top, .ro-side-bottom, .ro-side-left, .ro-side-right	Arrow placement in static markup.
.ro-mode-adaptive	Adaptive glass colors on .ro-tooltip.

CSS custom properties

Variable	Description
--ro-tooltip-color	Text color.
--ro-tooltip-p-inline	Horizontal padding.
--ro-tooltip-p-block	Vertical padding.
--ro-tooltip-radius	Border radius.
--ro-tooltip-border-width	Glass border width.
--ro-tooltip-glass-bg	Glass background (set by theme mixin).
--ro-tooltip-glass-color	Adaptive text color (with .ro-mode-adaptive).