Tooltip

UI::Tooltip

A hint shown on hover and focus.

# VelvetKit ## Tooltip (`UI::Tooltip`) A hint shown on hover and focus. Add it: `bin/rails generate velvetkit:add tooltip` Stimulus: `ui--tooltip` Installs: `@floating-ui/dom` ### Arguments ```ruby UI::Tooltip.new(class: nil, **html_attrs) ``` Slots: `with_trigger`, `with_tooltip_content`, `with_content` ### Example: Default ```erb <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Hover me", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content do %> Add to library <% end %> <% end %> ``` ### Example: Positions ```erb <div class="flex flex-wrap gap-8 p-8"> <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Top", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content(side: :top) do %> Tooltip on top <% end %> <% end %> <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Right", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content(side: :right) do %> Tooltip on right <% end %> <% end %> <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Bottom", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content(side: :bottom) do %> Tooltip on bottom <% end %> <% end %> <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Left", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content(side: :left) do %> Tooltip on left <% end %> <% end %> </div> ``` ### Example: With Button ```erb <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <%= tag.button("Save Changes", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %> <% end %> <% tooltip.with_content do %> Save your changes to the document <% end %> <% end %> ``` ### Example: With Icon ```erb <%= render(UI::Tooltip.new) do |tooltip| %> <% tooltip.with_trigger do %> <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-muted hover:bg-muted/80 cursor-pointer"> <%= render(UI::Icon.new(name: :info, size: :sm)) %> </span> <% end %> <% tooltip.with_content do %> More information about this feature <% end %> <% end %> ```

bin/rails generate velvetkit:add tooltip

Also adds: Nothing else
Stimulus: ui--tooltip
Installs: @floating-ui/dom

Examples

Default

default.html.erb

<%= render(UI::Tooltip.new) do |tooltip| %>
  <% tooltip.with_trigger do %>
    <%= tag.button("Hover me", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
  <% end %>
  <% tooltip.with_content do %>
    Add to library
  <% end %>
<% end %>

Positions

positions.html.erb

<div class="flex flex-wrap gap-8 p-8">
  <%= render(UI::Tooltip.new) do |tooltip| %>
    <% tooltip.with_trigger do %>
      <%= tag.button("Top", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
    <% end %>
    <% tooltip.with_content(side: :top) do %>
      Tooltip on top
    <% end %>
  <% end %>
  <%= render(UI::Tooltip.new) do |tooltip| %>
    <% tooltip.with_trigger do %>
      <%= tag.button("Right", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
    <% end %>
    <% tooltip.with_content(side: :right) do %>
      Tooltip on right
    <% end %>
  <% end %>
  <%= render(UI::Tooltip.new) do |tooltip| %>
    <% tooltip.with_trigger do %>
      <%= tag.button("Bottom", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
    <% end %>
    <% tooltip.with_content(side: :bottom) do %>
      Tooltip on bottom
    <% end %>
  <% end %>
  <%= render(UI::Tooltip.new) do |tooltip| %>
    <% tooltip.with_trigger do %>
      <%= tag.button("Left", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
    <% end %>
    <% tooltip.with_content(side: :left) do %>
      Tooltip on left
    <% end %>
  <% end %>
</div>

With Button

with_button.html.erb

<%= render(UI::Tooltip.new) do |tooltip| %>
  <% tooltip.with_trigger do %>
    <%= tag.button("Save Changes", class: "px-4 py-2 bg-primary text-primary-foreground rounded-md") %>
  <% end %>
  <% tooltip.with_content do %>
    Save your changes to the document
  <% end %>
<% end %>

With Icon

with_icon.html.erb

<%= render(UI::Tooltip.new) do |tooltip| %>
  <% tooltip.with_trigger do %>
    <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-muted hover:bg-muted/80 cursor-pointer">
      <%= render(UI::Icon.new(name: :info, size: :sm)) %>
    </span>
  <% end %>
  <% tooltip.with_content do %>
    More information about this feature
  <% end %>
<% end %>

API

Arguments

UI::Tooltip.new(class: nil, **html_attrs)

Slots: with_trigger with_tooltip_content with_content