Tooltip

Use tooltip component to add context to elements on the page.

Deprecated
Not reviewed for accessibility

Source

On this page

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

Arguments

Name	Type	Default	Description
`label`	`String`	N/A	the text to appear in the tooltip
`direction`	`String`	`:n`	Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`.
`align`	`String`	`:default`	Align 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`.
`multiline`	`Boolean`	`false`	Use this when you have long content
`no_delay`	`Boolean`	`false`	By default the tooltips have a slight delay before appearing. Set true to override this
`system_arguments`	`Hash`	N/A	System 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>

Edit this page on GitHub