< labo

Z-Tooltips !

What is Z-Tooltips ?

Z-Tooltips is the easyest and most lightweight way to provide beautiful tooltips on your web pages.

You'll just have to write your tooltip's content in a data-ztooltipsattribut instead of the usual title attribute.

How to :

<div class="[position class]" data-ztooltips="[text of the tooltip]">
  ...
</div>
  • class : (Optionnal) 4 classnames can altere the position of the tooltip (top / left / bottom / right)

  • data-ztooltips : The text that will be displayed in the tooltip

Demos :

Put your mouse on the rectangles and see the magic

no class
z-tooltips-top
z-tooltips-bottom
z-tooltips-left
z-tooltips-right

More :

I developed this for me and wanted to share it with you because I think it can be usefull.

I don't guarantee that it is perfect but I tried to do my best.

Contributions, forks, pull requests, comments... are welcome!