Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Development
CSSReactViewComponents
About
Getting started
ContributingSystem argumentsMigrationStatuses
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderImageCropIconButtonLabelLayoutLinkMenuMarkdownOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTextTimeAgoTimelineItemTooltipTruncateUnderlineNav
GitHub

Tooltip

Table of contents
Alpha
View sourceView storybook
Table of contents

Tooltip 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
Edit this page on GitHub