Tooltip
A hint on hover or focus, drawn in the top layer so nothing clips it. It flips to the other side when there isn't room, stays on screen, and closes on Escape.
A term in a sentence
Plain text content is styled as a term — a dashed underline — and made focusable.
Every page declares a
<p class="m-0">
Every page declares a
<%= tooltip "canonical URL", text: "The address search engines treat as the original when the same page is reachable at several." %>
in its head.
</p>Placement and edges
placement: :bottom flips above when there's no room; a hint near the edge is clamped on screen.
<div class="flex flex-wrap justify-between gap-2">
<%= tooltip text: "Shown below, flipping above when there's no room.", placement: :bottom do %>
<button type="button" class="<%= button_classes %>">placement: :bottom</button>
<% end %>
<%= tooltip text: "Clamped so it never runs off the edge of the screen, however long the hint happens to get." do %>
<button type="button" class="<%= button_classes %>">Near the right edge</button>
<% end %>
</div>