← All elements
<div class="tp"><b data-t="Top" data-dir="top">↑</b><b data-t="Right" data-dir="right">→</b><b data-t="Bottom" data-dir="bottom">↓</b><b data-t="Left" data-dir="left">←</b></div>About this hover effect
Tooltips that open above, below, left or right, chosen with a data-dir attribute and positioned with attribute selectors.
How it works
Each button stores its tooltip text in data-t and its direction in data-dir. The ::after pseudo-element shows the text through attr(data-t), and four attribute selectors, one per direction, place it above, below, left or right with absolute positioning and translate. Opacity fades it in on hover.
Ways to customise it
- Change the data-t text without editing the CSS.
- Edit the 130 percent offsets to move the tooltip closer or further away.
- Add a ::before arrow for each direction.
Good to know
Add the same rules for :focus-visible so keyboard users see the tip. Tooltip text in pseudo-elements is not reliably announced, so keep the key information visible elsewhere.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.