qtip

pretty, mobile-friendly tooltips

qtip

pretty, mobile-friendly tooltips.

http://performancejs.com/qtip/demo/

  • tiny (.5k gzipped), no dependencies
  • pretty, stylable via CSS
  • semantic (augments existing title attributes), uses CSS for styling
  • supported environments: AMD, CommonJS, browser globals

installation is nearly drop-in. just add empty data-qtip attributes to any elements with existing title attributes that you'd like to style. then attach qtip.js to the bottom of your page (it will self-initialize).

<html>
    <head>
        ...
    </head>
    <body>
 
        <span title="some text here" data-qtip></span>
 
        <a title="more text" data-qtip href="#"></span>
 
        ...
 
        <script src="qtip.js"></script> 
 
    </body>
</html>
# install build dependencies
npm install
 
# build css
stylus stylus --out css
 
# build js
grunt