Documentation

Everything you can do with Beauter

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
Examples
<div class="tooltip -tooltip-right _danger">Notice me
  <span class="tooltiptext">Tooltip text</span>
</div>
Notice me Tooltip text
<div class="tooltip -tooltip-left">No Delay
  <span class="tooltiptext _noDelay">Tooltip text</span>
</div>
No Delay Tooltip text
<div class="tooltip -tooltip-top">Shadowed
  <span class="tooltiptext _shadow">Tooltip text</span>
</div>
Shadowed Tooltip text
<div class="tooltip -tooltip-bottom">Special
  <span class="tooltiptext _primary">Tooltip text</span>
</div>
Special Tooltip text

Sitemap ..

Code licensed under MIT
Docs under CC BY NC SA 4.0.
Designed with
outboxcraft logoOutboxcraft
© 2017