"Table as Tooltip"
Bootstrap 3.3.0 Snippet by hardiktrivedi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <img src="https://image.flaticon.com/icons/png/128/64/64621.png" id="foo"> <table> <thead> <tr> <th>Addition Authorization Rules</th> <tr> </thead> <tbody> <tr> <td>Maximum <b>65</b> visits per <b>Monthly</b> of <b>67.00</b> Hours </td> </tr> </tbody> <tbody> <thead> <tr> <th>Addition Authorization Rules</th> <tr> </thead> <tbody> <tr> <td>Maximum <b>65</b> visits per <b>Monthly</b> of <b>67.00</b> Hours </td> </tr> </tbody> </table>
table { position: absolute; white-space: nowrap; border-collapse: collapse; display:none; border: 1px solid; } table td { background-color: #D5DBE9; } table th { background-color: #4B6888; color:#fff; } img:hover + table { display: table; }

Related: See More


Questions / Comments: