Tooltip

Examples

Default

A popup that displays information related to an element when hovered.

Add to library

<%= render "ui/tooltip" do %>
  <%= render "ui/tooltip/trigger" do %>Hover<% end %>
  <%= render "ui/tooltip/content" do %>Add to library<% end %>
<% end %>

Add to library

<%= render UI::Tooltip.new do %>
  <%= render UI::TooltipTrigger.new(as_child: true) do |attrs| %>
    <%= render UI::Button.new(**attrs, variant: :outline) { "Hover" } %>
  <% end %>
  <%= render UI::TooltipContent.new { "Add to library" } %>
<% end %>

Add to library

<%= render UI::TooltipComponent.new do %>
  <%= render UI::TooltipTriggerComponent.new do %>Hover<% end %>
  <%= render(UI::TooltipContentComponent.new) { "Add to library" } %>
<% end %>

With Icon

Tooltip trigger with an icon.

Add to library

<%= render "ui/tooltip" do %>
  <%= render "ui/tooltip/trigger" do %>
    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
  <% end %>
  <%= render "ui/tooltip/content" do %>Add to library<% end %>
<% end %>

Add to library

<%= render UI::Tooltip.new do %>
  <%= render UI::TooltipTrigger.new(as_child: true) do |attrs| %>
    <%= render UI::Button.new(**attrs, variant: :outline, size: :icon) do %>
      <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
    <% end %>
  <% end %>
  <%= render UI::TooltipContent.new { "Add to library" } %>
<% end %>

Add to library

<%= render UI::TooltipComponent.new do %>
  <%= render UI::TooltipTriggerComponent.new do %>
    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
  <% end %>
  <%= render(UI::TooltipContentComponent.new) { "Add to library" } %>
<% end %>

Side Positions

Tooltips can appear on different sides of the trigger.

Tooltip on top

Tooltip on right

Tooltip on bottom

Tooltip on left

<div class="flex gap-4">
  <%= render "ui/tooltip" do %>
    <%= render "ui/tooltip/trigger" do %>Top<% end %>
    <%= render "ui/tooltip/content", side: :top do %>Tooltip on top<% end %>
  <% end %>

  <%= render "ui/tooltip" do %>
    <%= render "ui/tooltip/trigger" do %>Right<% end %>
    <%= render "ui/tooltip/content", side: :right do %>Tooltip on right<% end %>
  <% end %>

  <%= render "ui/tooltip" do %>
    <%= render "ui/tooltip/trigger" do %>Bottom<% end %>
    <%= render "ui/tooltip/content", side: :bottom do %>Tooltip on bottom<% end %>
  <% end %>

  <%= render "ui/tooltip" do %>
    <%= render "ui/tooltip/trigger" do %>Left<% end %>
    <%= render "ui/tooltip/content", side: :left do %>Tooltip on left<% end %>
  <% end %>
</div>

Tooltip on top

Tooltip on right

Tooltip on bottom

Tooltip on left

<div class="flex gap-4">
  <%= render UI::Tooltip.new do %>
    <%= render UI::TooltipTrigger.new(as_child: true) do |attrs| %>
      <%= render UI::Button.new(**attrs, variant: :outline) { "Top" } %>
    <% end %>
    <%= render UI::TooltipContent.new(side: :top) { "Tooltip on top" } %>
  <% end %>

  <%= render UI::Tooltip.new do %>
    <%= render UI::TooltipTrigger.new(as_child: true) do |attrs| %>
      <%= render UI::Button.new(**attrs, variant: :outline) { "Right" } %>
    <% end %>
    <%= render UI::TooltipContent.new(side: :right) { "Tooltip on right" } %>
  <% end %>

  <%= render UI::Tooltip.new do %>
    <%= render UI::TooltipTrigger.new(as_child: true) do |attrs| %>
      <%= render UI::Button.new(**attrs, variant: :outline) { "Bottom" } %>
    <% end %>
    <%= render UI::TooltipContent.new(side: :bottom) { "Tooltip on bottom" } %>
  <% end %>

  <%= render UI::Tooltip.new do %>
    <%= render UI::TooltipTrigger.new(as_child: true) do |attrs| %>
      <%= render UI::Button.new(**attrs, variant: :outline) { "Left" } %>
    <% end %>
    <%= render UI::TooltipContent.new(side: :left) { "Tooltip on left" } %>
  <% end %>
</div>

Tooltip on top

Tooltip on right

Tooltip on bottom

Tooltip on left

<div class="flex gap-4">
  <%= render UI::TooltipComponent.new do %>
    <%= render UI::TooltipTriggerComponent.new do %>Top<% end %>
    <%= render(UI::TooltipContentComponent.new(side: :top)) { "Tooltip on top" } %>
  <% end %>

  <%= render UI::TooltipComponent.new do %>
    <%= render UI::TooltipTriggerComponent.new do %>Right<% end %>
    <%= render(UI::TooltipContentComponent.new(side: :right)) { "Tooltip on right" } %>
  <% end %>

  <%= render UI::TooltipComponent.new do %>
    <%= render UI::TooltipTriggerComponent.new do %>Bottom<% end %>
    <%= render(UI::TooltipContentComponent.new(side: :bottom)) { "Tooltip on bottom" } %>
  <% end %>

  <%= render UI::TooltipComponent.new do %>
    <%= render UI::TooltipTriggerComponent.new do %>Left<% end %>
    <%= render(UI::TooltipContentComponent.new(side: :left)) { "Tooltip on left" } %>
  <% end %>
</div>

Features

Keyboard navigation
Form integration

API Reference

Root container for tooltip. Manages tooltip state via Stimulus controller.

Content

The popup content that displays tooltip information.

Parameters

Name	Type	Default	Description
side	String	top	Which side to display on
align	String	center	Alignment within container
side_offset	Integer	4	The side offset

Trigger

The interactive element that shows/hides the tooltip on hover/focus.

Parameters

Name	Type	Default	Description
as_child	Boolean	false	When true, yields attributes to block instead of rendering wrapper

Accessibility

Adheres to theTooltip WAI-ARIA design pattern

Implements the WAI-ARIA Tooltip pattern with proper roles, states, and keyboard navigation.

Keyboard Shortcuts

Key	Description
Escape	Closes the component

JavaScript

Stimulus Controller

ui--tooltip

Values

Name	Type	Description
sideOffset	Number	The sideOffset

Actions

showhide