Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> a.tooltip { border-bottom: 1px dashed; text-decoration: none; } a.tooltip:hover { cursor: help; position: relative; } a.tooltip span { display: none; } a.tooltip:hover span { border: #666 2px dotted; padding: 5px 20px 5px 5px; display: block; z-index: 100; background: #e3e3e3; left: 0px; margin: 15px; width: 300px; position: absolute; top: 15px; text-decoration: none; } </style> </head> <body> <a href="#" class="tooltip">Mouse over the link <span>CSS tooltip showing up when your mouse over the link</span> </a> </body> </html>