Documentation

Everything you can do with Beauter


Tooltips


Beauter allows 4 basic tooltips for all 4 directions with an arrow on the hover text.

div classes
tooltip
tooltiptext
object
-tooltip-right
-tooltip-left
-tooltip-top
-tooltip-bottom
Example
<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><br>
<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>
Notice me Tooltip text
No Delay Tooltip text

Shadowed Tooltip text
Special Tooltip text


News

  • New 'Examples' section coming with wonderful tutorials!
  • Adding animations and transitions effects soon.
  • 0.3 development started. Join us here.

Get Involved

Your contribution can make beauter more beautiful. Visit Github to collaborate.

Star Fork

Sitemap Designed with by Shubham Ramdeo
Follow @ramdeoshubham
outboxcraft logoOutboxcraft
© 2017