Tooltip Edit

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.



  rails generate shadcn-ui tooltip


<%= 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.