<body>
<p>your tooltips example: transitioning the position (such as bottom, left, etc) is resource <a href="#" data-tool-tip="Tatiana">intensive</a> ; you should rely on transforms whenever possible, as they can be GPU</p>
</body>a[data-tool-tip] {
position: relative;
}
a[data-tool-tip]::after {
content:attr(data-tool-tip);
position: absolute;
display: block;
left: 50%;
transform: translateX(-50%) translateY(-20%) scale(0);
background-color: lightseagreen;
padding: 5px 5px;
color: blueviolet;
border-radius: 5px;
font-size: 0.8em;
transition: transform ease-in-out;
}
a[data-tool-tip]:hover::after,
a[data-tool-tip]:hover::before {
transform: translateX(-50%) translateY(-20%) scale(1);
}
a[data-tool-tip]::before {
content: '';
border: 10px solid transparent;;
border-top-color: black;
}
