Skip to content
On this page

Tooltip

Use tooltip component to add context to elements on the page.
  • Deprecated
  • Not reviewed for accessibility
On this page

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

Arguments

NameTypeDefaultDescription
labelStringN/Athe text to appear in the tooltip
directionString:nDirection of the tooltip. One of :e, :n, :ne, :nw, :s, :se, :sw, or :w.
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, :left_2, :right_1, 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

Examples

Default

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

Wrapping another component

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