Tooltip
is a wrapper component that will apply a tooltip to the provided content.
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 |
<div class="pt-5"><%= render(Primer::Tooltip.new(label: "Even bolder")) { "Default Bold Text" } %></div>
<div class="pt-5"><%= render(Primer::Tooltip.new(label: "Even bolder")) do %><%= render(Primer::ButtonComponent.new) { "Bold Button" } %><% end %></div>
<div class="pt-5"><%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %></div>
<div class="pt-5"><%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %></div>
<div class="pt-5"><%= render(Primer::Tooltip.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %></div>