Tooltip

<div class="flex flex-col items-start gap-4">
  <%= render Ui::Tooltip::Component.new(title: "Top tooltip", data: { placement: "top" }) do %>
    <%= render Ui::Btn::Component.new(variant: :secondary).with_content "Top Tooltip" %>
  <% end %>

  <%= render Ui::Tooltip::Component.new(title: "Right tooltip", data: { placement: "right" }) do %>
    <%= render Ui::Btn::Component.new(variant: :danger).with_content "Right Tooltip" %>
  <% end %>

  <%= render Ui::Tooltip::Component.new(title: "Left tooltip", data: { placement: "left" }) do %>
    <%= render Ui::Btn::Component.new.with_content "Left Tooltip" %>
  <% end %>

  <%= render Ui::Tooltip::Component.new(title: "Tooltip content", data: { placement: "bottom" }) do %>
    <%= render Ui::Btn::Component.new(variant: :primary).with_content "Bottom Tooltip" %>
  <% end %>
</div>