Tooltip Edit

<%= render_tooltip do %>
  <%= tooltip_trigger do %>
    <%= render_button "Hover", variant: :outline %>
  <% end %>
  <%= tooltip_content do %>
    <div class="grid gap-2">
      <div class="space-y-2">
        <p class="text-sm text-muted-foreground">More will be revealed.</p>
      </div>
    </div>
  <% end %>
<% end %>

Installation

  rails generate shadcn-ui tooltip

Usage

<%= render_tooltip do %>
  <%= tooltip_trigger do %>
  <% end %>

  <%= tooltip_content do %>
  <% end %>
<% end %>

The Tooltip component introduces:

• app/helpers/components/tooltip_helper.rb
• app/javascript/controllers/ui/tooltip_controller.js
• app/views/components/ui/_tooltip.html.erb

render_tooltip accepts a block that contains calls to tooltip_trigger and tooltip_content each accepting a block for their respective content. The tooltip_trigger is the element that upon hovering over, will reveal the tooltip_content.