tooltip.md

Tooltip

Prerequisites: run component setup (view_primitives:install) once per app.

Small text label that appears near an element on hover. Pure CSS — no JavaScript required.

Installation

rails g view_primitives:add tooltip

Creates app/components/ui/tooltip_component.rb.

Refresh after a gem upgrade:

rails g view_primitives:update --only tooltip

Usage

<%= ui :tooltip, text: "Save your changes" do %>
  <%= ui :button, size: :icon do %>
    <svg ...></svg>
  <% end %>
<% end %>

Position

Side	Description
:top	Above the element (default)
:bottom	Below the element
:left	Left of the element
:right	Right of the element

<%= ui :tooltip, text: "Delete", side: :right do %>
  <%= ui :button, variant: :destructive, size: :icon do %><svg ...></svg><% end %>
<% end %>

API

Option	Type	Default	Description
text	String	required	Tooltip bubble text
side	Symbol	:top	:top, :bottom, :left, or :right
**html_attrs	Hash	—	Forwarded to the outer <span> wrapper