Tooltip

Tooltips are small descriptive messages that appear when a user hovers over or gives keyboard focus to an element. They are used to provide context or clarify an element’s function.

Examples

Basic Tooltip

To create a tooltip, wrap a trigger element with the <ro-tooltip> custom element and provide the content in a data-ro-text attribute. The tooltip will appear on mouseenter or focus events.

<ro-tooltip data-ro-text="This is a tooltip.">
  <button class="ro-btn">Hover or Focus Me</button>
</ro-tooltip>

Preview

Hover or Focus Me

Placement

Use the data-ro-placement attribute on the <ro-tooltip> element to control its position relative to the trigger. The default is top-center. It accepts all placements from Floating UI.

<ro-tooltip data-ro-text="Tooltip on the top" data-ro-placement="top">
  <button class="ro-btn">Top</button>
</ro-tooltip>
<ro-tooltip data-ro-text="Tooltip on the bottom" data-ro-placement="bottom">
  <button class="ro-btn">Bottom</button>
</ro-tooltip>
<ro-tooltip data-ro-text="Tooltip on the left" data-ro-placement="left">
  <button class="ro-btn">Left</button>
</ro-tooltip>
<ro-tooltip data-ro-text="Tooltip on the right" data-ro-placement="right">
  <button class="ro-btn">Right</button>
</ro-tooltip>

Preview

TopBottomLeftRight

Tooltip with Arrow

Add the data-ro-arrow attribute to include a small arrow that points toward the trigger element. The attribute does not require a value.

<ro-tooltip data-ro-text="This tooltip has an arrow."
data-ro-arrow>
  <button class="ro-btn">Hover for Arrow</button>
</ro-tooltip>

Preview

Hover for Arrow

Properties

<ro-tooltip> Attributes

Attribute	Default	Description
data-ro-text	(none)	Required. The text content to display in the tooltip.
data-ro-placement	top-center	Sets the position relative to the trigger. Accepts values like top, bottom-start, etc.
data-ro-arrow	(none)	A boolean attribute that adds a small arrow pointing to the trigger element.

CSS Custom Properties

You can override these CSS variables to customize the tooltip’s appearance.

Variable	Default	Description
--ro-tooltip-maxw	300px	The maximum width of the tooltip.
--ro-tooltip-bg	var(--ro-colors-overlay-inverted)	The background color of the tooltip.
--ro-tooltip-color	var(--ro-colors-text-inverted)	The text color of the tooltip.
--ro-tooltip-fs	var(--ro-fs-text-sm)	The font size of the tooltip text.
--ro-tooltip-padding	var(--ro-size-1) var(--ro-size-2)	The padding inside the tooltip.
--ro-tooltip-arrow-color	inherit	The color of the arrow.