Tooltip

Tooltips display helpful text when users hover over an element.

Tooltips

Sage Component

SageTooltip

<h3 class="t-sage-heading-6">Tooltips</h3>
<%= sage_component SagePanelBlock, {} do %>
  <%= sage_component SageTooltip, {
    position: "top",
    text: "Nascetur ridiculus mus",
  } %>
  <%= sage_component SageTooltip, {
    position: "bottom",
    text: "80%",
    size: "small"
  } %>
  <%= sage_component SageTooltip, {
    position: "left",
    text: "Cursus Aenean",
  } %>
  <%= sage_component SageTooltip, {
    position: "right",
    text: "Bibendum Condimentum",
  } %>
<% end %>

Property	Description	Type	Default
`position`	Set this property to position the tooltip.	String: ["top", "right", "bottom", "left"]	`nil`
`size`	Set this property to assign tooltip size. Choose between `small` (decreased horizontal padding) and `large` (increased maximum width). When empty, defaults to a maximum width of 200px.	String: ["small", "large"]	`nil`
`text`	Text that will be displayed within the tooltip.	String	`nil`