2.42.1 #Components.tooltip.large Tooltip large

Toggle example guides Toggle HTML markup

Tooltip element large. Used for long text (not ideal). e.g: comments on feedback page or privacy policy.

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

hover me

Markup
<div class="sb-tooltip__container sb-text--center" aria-describedby="tooltip-5">
  <p>hover me</p>
  <div role="tooltip" id="tooltip-5" class="sb-tooltip sb-tooltip--l">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum turpis enim, eget tempor tellus placerat at. Mauris quis tincidunt eros. Sed eu felis nulla. Aliquam ullamcorper magna risus, id placerat leo pulvinar at. Nunc tortor nunc, porttitor a finibus vel, tristique quis enim. Mauris eget mauris laoreet, vulputate libero finibus, dignissim nisi. In nec lectus vel est vehicula efficitur consequat vel ligula. Curabitur accumsan quam at mauris finibus, et egestas nulla ultricies. Pellentesque vel venenatis tellus, sed tempus ex. Nunc condimentum ligula eros, id scelerisque odio blandit quis. Morbi sit amet felis non ex dictum vulputate.</p>
    <div class="sb-tooltip__arrow"></div>
  </div>
</div>
Source: components/_tooltip.scss, line 221