Tooltips

Overflow-safe tooltips using fixed positioning via Stimulus controller. Works inside overflow:auto/hidden containers like Drawer layouts.

Positions

All four tooltip positions: top, right, bottom, left

<%= bui_tooltip("Tooltip on top", position: :top) do %>
  <%= bui_button(variant: :primary, size: :sm) { "Top" } %>
<% end %>

<%= bui_tooltip("Tooltip on bottom", position: :bottom) do %>
  <%= bui_button(variant: :primary, size: :sm) { "Bottom" } %>
<% end %>

Variants

Dark (default) and light tooltip styles

All Positions with Light Variant

<%= bui_tooltip("Dark tooltip", variant: :dark) do %>
  <%= bui_button(variant: :dark, size: :sm) { "Dark" } %>
<% end %>

<%= bui_tooltip("Light tooltip", variant: :light) do %>
  <%= bui_button(variant: :light, size: :sm) { "Light" } %>
<% end %>

Sizes

Small (default) and medium tooltip text sizes

<%= bui_tooltip("Small tooltip", size: :sm) do %>
  <%= bui_button(variant: :primary, size: :sm) { "Small" } %>
<% end %>

<%= bui_tooltip("Medium tooltip", size: :md) do %>
  <%= bui_button(variant: :primary, size: :sm) { "Medium" } %>
<% end %>

Wrapping Different Elements

Tooltips can wrap any content: buttons, badges, text, avatars

Hover this text

<%= bui_tooltip("Badge info", position: :bottom) do %>
  <%= bui_badge(variant: :danger, dot: true) { "Notifications" } %>
<% end %>

<%= bui_tooltip("More info", position: :right) do %>
  <span class="underline cursor-help">Hover this text</span>
<% end %>

Overflow Container (Fixed Positioning)

Tooltips use position:fixed to escape overflow:auto/hidden containers. The box below has overflow-auto — tooltips still render correctly.

This container has overflow-auto. Previously, tooltips would get clipped here.

Extra content to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Inside overflow-hidden

This container has overflow-hidden.

<div class="overflow-auto max-h-48">
  <%= bui_tooltip("Still visible!", position: :top) do %>
    <%= bui_button(variant: :danger, size: :sm) { "Hover me" } %>
  <% end %>
</div>

Viewport Edge Flipping

Tooltips automatically flip to the opposite side when they would overflow the viewport edge

<%= bui_tooltip("Auto-flips!", position: :left) do %>
  <%= bui_button(variant: :info, size: :sm) { "Near edge" } %>
<% end %>