<!DOCTYPE html> <html><head> <title>HTML5 Tooltips example</title> <link rel="stylesheet" type="text/css" href="./html5tooltips.css" /> <link rel="stylesheet" type="text/css" href="./html5tooltips.animation.css" /> <script type="text/javascript" src="./html5tooltips.js"></script> <style type="text/css"> body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; height:9999px; } </style> </head><body> <form action="#" method="post"> <h3>Register new customer</h3> <fieldset> <legend>Login and password</legend> <table> <tbody> <tr> <td> <label for="name">Login name</label> </td> <td> <input id="name" type="text" /> </td> </tr> <tr> <td> <label for="password">Password</label> </td> <td> <input id="password" type="password" /> </td> </tr> <tr> <td> <label for="password2">Repeat password</label> </td> <td> <input id="password2" type="password" /> </td> </tr> </tbody> </table> </fieldset> <br> <fieldset> <legend>Contact information</legend> <table data-tooltip-animate-function="spin" data-tooltip-stickto="right" data-tooltip-persistent="true"> <tbody> <tr> <td> <label for="fullname">Full name</label> </td> <td> <input id="fullname" type="text" data-tooltip="Your first and second name" data-tooltip-color="indigo" /> </td> </tr> <tr> <td> <label for="email">Email</label> </td> <td> <input id="email" type="text" data-tooltip="It would be used to restore your password" data-tooltip-color="kelly" /> </td> </tr> <tr> <td> <label for="phone">Phone</label> </td> <td> <input id="phone" type="text" data-tooltip="We may call you to verify your identity" data-tooltip-color="hot pink" /> </td> </tr> <tr> <td> <label for="address">Address</label> </td> <td> <textarea id="address" data-tooltip="For post delivery" data-tooltip-more="It should contain zip code and country name" data-tooltip-color="bamboo" data-tooltip-delay="1000" data-tooltip-maxwidth="180"></textarea> </td> </tr> </tbody> </table> </fieldset> </form> <script type="text/javascript"> for(var i=10;i--;) html5tooltips([ { contentText: "Short and easy to remember", contentMore: "Should <span style='text-decoration:underline;'>not</span> contain white spaces or special characters", targetSelector: "#name", stickTo: "top", color: "violet", maxWidth: 180 }, { contentText: "<a href='http://example.com' target='_blank'>Generate</a>", contentMore: "May contain d<span style='color:red;'>1</span>g<span style='color:red;'>1</span>ts and sp<span style='color:red;'>3</span>c<span style='color:red;'>!</span>al sym<span style='color:red;'>6</span>ols", targetSelector: "#password", stickTo: "right", color:'metalic silver', maxWidth: 180, persistent: true }, { contentText: "To ensure you remember it", color: "rouge", targetSelector: "#password2" } ]); for(var i=10;i--;) html5tooltips({ contentText: "Click to focus the field", color: "peacock", targetSelector: "label", }); for(var i=10;i--;) html5tooltips.refresh(); console.log( html5tooltips.getTooltipByTarget( document.getElementById('address'))); </script> </body></html>