qtip

pretty, mobile-friendly tooltips

npm install qtip
19 downloads in the last month

qtip

pretty, mobile-friendly tooltips.

screenshot

demo

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

features

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

usage

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>

building it yourself

# install build dependencies
npm install

# build css
stylus stylus --out css

# build js
grunt

browser api requirements:

npm loves you