# 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 %>
```