Tooltips

Beauter allows basic tooltips which can be customized using utilities for all 4 directions with an arrow on the hover text.

base classes

tooltip
tooltiptext

Use tooltip class to add tooltip to a text or button. Then use tooltiptext class to define the tooltip text.

object classes

-tooltip-right
-tooltip-left
-tooltip-top
-tooltip-bottom

<div class="tooltip -tooltip-right _danger">Notice me
  <span class="tooltiptext">Tooltip text</span>
</div>

<div class="tooltip -tooltip-left">No Delay
  <span class="tooltiptext _noDelay">Tooltip text</span>
</div>

<div class="tooltip -tooltip-top">Shadowed
  <span class="tooltiptext _shadow">Tooltip text</span>
</div>

<div class="tooltip -tooltip-bottom">Special
  <span class="tooltiptext _primary">Tooltip text</span>
</div>

Thanks ♥ for choosing Beauter