Skip to content


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



Default Bold Text
<div class="pt-5">
<%= render( "Even bolder")) { "Default Bold Text" } %>

Wrapping another component

<div class="pt-5">
<%= render( "Even bolder")) do %>
<%= render( { "Bold Button" } %>
<% end %>

With a direction

Bold Text With a Direction
<div class="pt-5">
<%= render( "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>

With an alignment

Bold Text With an Alignment
<div class="pt-5">
<%= render( "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>

Without a delay

Bold Text without a delay
<div class="pt-5">
<%= render( "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>


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