<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>
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;
}
