CSS tooltips (hint.css)

This example is a test of the hint.css library, that provides a convenient way to define tooltips in pure CSS.

A little customization is done on the second element, to delay a little the display of the tooltip.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tooltips in CSS (hint.css)</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <link type="text/css" href="hint.min.css" rel="stylesheet"/>
    </head>
    <body>
        <p>Try to hover <span class="hint--top" data-hint="This is a tooltip.">these words</span> to see a tooltip.</p>
        <p>Try <span class="hint--top hint--delay" data-hint="This one too.">these ones</span> too (wait a little more).</p>
    </body>
</html>
    