Stylabilla

2.42 #Components.tooltip Tooltip

Tooltip element default (medium). Used for descriptions or explanation of an action on the interface. Slides up to the top of its container. Note that we do not currently support inline elements with tooltips.

Browser support: IE9+, Safari6.2+, Firefox30+, Chrome32+

Default styling

.sb-tooltip--bottom

Slides down to the bottom of its container.

.sb-tooltip--open

Always open tooltip.

Markup

<div class="sb-tile sb-padding-l sb-text--center">
  <div class="sb-tooltip__container" aria-describedby="tooltip-1">
    <a href="#">hover me</a>
    <div role="tooltip" id="tooltip-1" class="sb-tooltip [modifier class]">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum turpis enim, eget tempor tellus placerat at.</p>
      <p>Alea iacta est!</p>
      <div class="sb-tooltip__arrow"></div>
    </div>
  </div>
</div>

Source: components/_tooltip.scss, line 3