HTML CSS examples for CSS Widget:Tooltip
Styling button tooltip
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> *{ font-family: Calibri; } .wrapper {<!--from w w w. j a v a2 s . c o m--> margin: 25px; } a { position: relative; } a:hover{ text-decoration: none; } a::before { border-left: 5px solid transparent; border-top: 5px solid #ffe4b5; border-right: 5px solid transparent; height: 0px; width: 0px; content:''; top: -2px; left: 6px; } a::after { content: attr(data-tooltip); top: -25px; left: -5px; background: #ffe4b5; border-radius: 4px; padding: 2px 6px; white-space: nowrap; color: black; } a::after, a::before { position: absolute; display: none; } a:hover::after, a:hover::before { display: block; } </style> </head> <body> <div class="wrapper"> Some long long text blah blah with some <a href="#" data-tooltip="Tooltip">link</a> inside it. <br> Some more text blah blah with some <a href="#" data-tooltip="Long Tooltip">link</a> inside it </div> <script type="text/javascript"> </script> </body> </html>