Skip to content

Tooltip

The Tooltip component is a wrapper component that will apply a tooltip to the provided content.

Examples

Default

Default Bold Text
<div class="pt-5">
<%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
</div>

Wrapping another component

<div class="pt-5">
<%= render(Primer::TooltipComponent.new(label: "Even bolder")) do %>
<%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
<% end %>
</div>

With a direction

Bold Text With a Direction
<div class="pt-5">
<%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
</div>

With an alignment

Bold Text With an Alignment
<div class="pt-5">
<%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
</div>

Without a delay

Bold Text without a delay
<div class="pt-5">
<%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
</div>

Arguments

NameTypeDefaultDescription
labelStringN/Athe text to appear in the tooltip
directionString:nDirection of the tooltip. One of :n, :nw, :ne, :w, :e, :sw, :s, or :se.
alignString:defaultAlign tooltips to the left or right of an element, combined with a direction to specify north or south. One of :default, :left_1, :right_1, :left_2, or :right_2.
multilineBooleanfalseUse this when you have long content
no_delayBooleanfalseBy default the tooltips have a slight delay before appearing. Set true to override this
system_argumentsHashN/ASystem arguments