New
Open/Save
Download
View Source
Packages
PHP Bundle
Save 60%+
All our PHP scripts
PHP
Innovative PHP packages
Python
Advanced Python packages
Node.js
Advanced Node.js packages
Back to Snippets
CSS3 Tooltips Example
Tool tips are useful if you want to hint text to the user when they hover over a link or image etc.
#a
/
HTML
*
CSS
()
JS
Output
Live Updates
body { font-family: Arial, Helvetica, sans-serif; padding: 150px; background: #f2f4f6; } a { text-decoration: none; font-weight: 800; color: #4d4d4d; text-transform: uppercase; line-height: 30px; color: #4e5e71; } .tooltip:hover, [data-tooltip-bottom]:hover, [data-tooltip-left]:hover, [data-tooltip-right]:hover, [data-tooltip]:hover { position: relative; } [data-tooltip-bottom]:hover::after, [data-tooltip-left]:hover::after, [data-tooltip-right]:hover::after, [data-tooltip]:hover::after { all: initial; display: inline-block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #1a1a1a; position: absolute; bottom: 100%; content: ''; left: 50%; transform: translate(-50%, 0); margin-bottom: 5px; } [data-tooltip-right]:hover::after { margin-bottom: 0; bottom: auto; transform: rotate(90deg) translate(0, -50%); left: 100%; top: 50%; margin-left: -5px; margin-top: -5px; } [data-tooltip-left]:hover::after { margin-bottom: 0; bottom: auto; transform: rotate(-90deg) translate(0, -50%); left: auto; right: 100%; top: 50%; margin-right: -5px; margin-top: -5px; } [data-tooltip-bottom]:hover::after { margin-bottom: 0; bottom: auto; transform: rotate(180deg) translate(-50%, 0); top: 100%; margin-left: -20px; margin-top: 5px; } .tooltip:hover .tooltip-dynamic-bottom, .tooltip:hover .tooltip-dynamic-left, .tooltip:hover .tooltip-dynamic-right, .tooltip:hover .tooltip-dynamic, [data-tooltip-bottom]:hover::before, [data-tooltip-left]:hover::before, [data-tooltip-right]:hover::before, [data-tooltip]:hover::before { all: initial; font-family: Arial, Helvetica, sans-serif; display: inline-block; border-radius: 5px; padding: 10px; background-color: #1a1a1a; content: attr(data-tooltip); color: #f9f9f9; position: absolute; bottom: 100%; width: 100px; left: 50%; transform: translate(-50%, 0); margin-bottom: 15px; text-align: center; font-size: 14px; } .tooltip:hover .tooltip-dynamic-right, [data-tooltip-right]:hover::before { margin-bottom: 0; bottom: auto; transform: translate(0, -50%); left: 100%; top: 50%; content: attr(data-tooltip-right); margin-left: 15px; } .tooltip:hover .tooltip-dynamic-left, [data-tooltip-left]:hover::before { margin-bottom: 0; bottom: auto; transform: translate(0, -50%); left: auto; right: 100%; top: 50%; content: attr(data-tooltip-left); margin-right: 15px; } .tooltip:hover .tooltip-dynamic-bottom, [data-tooltip-bottom]:hover::before { margin-bottom: 0; bottom: auto; top: 100%; content: attr(data-tooltip-bottom); margin-top: 15px; } .tooltip .tooltip-dynamic-bottom, .tooltip .tooltip-dynamic-left, .tooltip .tooltip-dynamic-right, .tooltip .tooltip-dynamic { display: none; width: auto !important; }
<a href="#" data-tooltip="This tooltip is created using CSS3 and HTML5!">Top Tooltip</a> <br> <a href="#" data-tooltip-right="This tooltip is created using CSS3 and HTML5!">Right Tooltip</a> <br> <a href="#" data-tooltip-bottom="This tooltip is created using CSS3 and HTML5!">Bottom Tooltip</a> <br> <a href="#" data-tooltip-left="This tooltip is created using CSS3 and HTML5!">Left Tooltip</a> <br> <a href="#" class="tooltip"> <span class="tooltip-dynamic"> <b>Tooltip Title</b> <br> <br> <img src="https://codeshack.io/web/img/uploads/photo200x200.jpg" alt=""> </span> Dynamic Tooltip </a>