Usage
# <% As a button %>
<%= ui.tooltip "Hover me", title: "Tooltip text", as: :btn %>
# <% As a span (default) %>
<%= ui.tooltip title: "Help text" do %>
Hover over this text
<% end %>
# <% With placement %>
<%= ui.tooltip "Right tooltip", title: "Appears on right", as: :btn, placement: :right %>Block contentText or HTML. Alternative to passing text as first argument.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | - | The tooltip text to display on hover. |
as | Symbol | nil | Render as another UI component (e.g., `:btn`). If nil, renders as a span. |
placement | Symbol:top | :right | :bottom | :left | :top | Position of the tooltip relative to the target element. |
Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.
Examples
Placements
<%= ui.group sticky: false do %>
<%= ui.tooltip "Top Tooltip", title: "Top Tooltip", as: :btn, placement: :top, variant: :secondary %>
<%= ui.tooltip "Right Tooltip", title: "Right Tooltip", as: :btn, placement: :right, variant: :danger %>
<%= ui.tooltip "Left Tooltip", title: "Left Tooltip", as: :btn, placement: :left %>
<%= ui.tooltip "Bottom Tooltip", title: "Bottom Tooltip", as: :btn, placement: :bottom %>
<% end %>Without Component
Tooltip without component
<span>
Tooltip without component
<%= ui.icon "question-mark-circle", size: 5, data: { controller: "tooltip", tooltip_content_value: "Without component" }, class: "cursor-help" %>
</span>With Button Variants
<div class="flex gap-2">
<%= ui.tooltip "Default", title: "Default button tooltip", as: :btn %>
<%= ui.tooltip "Secondary", title: "Secondary button tooltip", as: :btn, variant: :secondary %>
<%= ui.tooltip "Outline", title: "Outline button tooltip", as: :btn, variant: :outline %>
</div>