<!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 src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; } </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" data-tooltip="your name" data-tooltip-stickto="right"/> </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> <tbody> <tr> <td> <label for="fullname">Full name</label> </td> <td> <input id="fullname" type="text" /> </td> </tr> <tr> <td> <label for="email">Email</label> </td> <td> <input id="email" type="text" /> </td> </tr> <tr> <td> <label for="phone">Phone</label> </td> <td> <input id="phone" type="text" /> </td> </tr> <tr> <td> <label for="address">Address</label> </td> <td> <textarea id="address"></textarea> </td> </tr> </tbody> </table> </fieldset> </form> <script type="text/javascript"> require(['html5tooltips'],function(html5tooltips){ $(function(){ html5tooltips.autoinit(); }); }); </script> </body></html>