Tooltip

A bubble showing information related to an element on hover or focus.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add tooltip --yes

The tooltip registry item installs these files:

app/components/ui_component.rb
app/components/ui/tooltip_component.rb
app/components/ui/tooltip/trigger_component.rb
app/components/ui/tooltip/content_component.rb
app/components/ui/button_component.rb
app/helpers/ui/tooltip_helper.rb
app/helpers/ui/button_helper.rb
app/javascript/controllers/ui_tooltip_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

The ui-tooltip controller opens on hover or focus after a delay, ties the trigger to the bubble through aria-describedby, and closes on Esc without moving focus (WCAG 1.4.13). The content lives inside the root, so the pointer can move onto it without closing it.

<%= ui_tooltip do %>
  <%= ui_tooltip_trigger(variant: :outline) { "Passe o mouse" } %>
  <%= ui_tooltip_content { "Add to library" } %>
<% end %>

Or render the components directly:

<%= render Ui::TooltipComponent.new(open_delay: 150) do %>
  <%= render Ui::Tooltip::TriggerComponent.new do %>
    Help
  <% end %>
  <%= render Ui::Tooltip::ContentComponent.new(side: :right) do %>
    More details
  <% end %>
<% end %>

Composition

Tooltip (data-controller="ui-tooltip", relative)
|-- Tooltip::Trigger (a Button described through aria-describedby)
`-- Tooltip::Content (role="tooltip", absolute, side:)

Examples

Default

Opens on hover and on focus after a short delay; Esc closes it without moving focus.

<%= ui_tooltip do %>
  <%= ui_tooltip_trigger(variant: :outline) { "Hover me" } %>
  <%= ui_tooltip_content { "Add to library" } %>
<% end %>

Sides

side: :top, :right, :bottom or :left positions the bubble.

<% { top: "Top", right: "Right", bottom: "Bottom", left: "Left" }.each do |side, label| %>
  <%= ui_tooltip do %>
    <%= ui_tooltip_trigger(variant: :outline) { label } %>
    <%= ui_tooltip_content(side: side) { "On the #{side}" } %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Tooltip`	`open_delay`	`300`	The delay in milliseconds before it opens on hover.
`Tooltip::Trigger`	`variant`, `size`	`:outline`	Wraps `Ui::ButtonComponent`; gains `aria-describedby` once connected.
`Tooltip::Content`	`side`	`:top`	`:top`, `:right`, `:bottom`, `:left`.