An Interest In:
Web News this Week
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
Tooltip using only CSS
Using a tooltip is a great way to pass information to the user in a very minimal and efficient way. It reduces the contents from the page which is important to show but not needed to show all the time.
But when it comes to adding tooltips to the website, we developers generally use a library for this, which is definitely good as it gives a lot of customizations and controls. But in a situation when tooltips are required but not on a large scale instead, in certain places on the page, then it kinda feels useless to carry around such big libraries for this.
Required Knowledge:-
- General working knowledge of
HTML
andCSS
- How
data
attribute works in HTML and CSS. For reference check this CSS-tricks article- Understanding of pseudo-selectors in CSS
In this, we'll be creating a tooltip using only CSS. There are several ways to create a tooltip in CSS. In this, we'll be using pseudo-selectors
of CSS. One benefit of using this method is that there's no need to create an actual element in the HTML.
First of all, on whichever element you want to show the tooltip, add a data
attribute data-customTooltip="Tooltip text"
. Also, pass the text you wanna show on the tooltip.
index.html
<span data-customTooltip="Tooltip text"> Hover on me to see tooltip</span>
That's it, this is all we need in HTML. Now, let's add CSS to it. Here we'll be styling the tooltip using data attribute selector. Read here more about it.
styles.css
[data-customTooltip]{ cursor: pointer; position: relative;}[data-customTooltip]::after { background-color: #fff; color: #222; font-size:14px; padding: 8px 12px; height: fit-content; width: fit-content; border-radius: 6px; position: absolute; text-align: center; bottom: 0px; left: 50%; content: attr(data-customTooltip); transform: translate(-50%, 110%) scale(0); transform-origin: top; transition: 0.14s; box-shadow: 0 4px 14px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05); }
Here, we're selecting the elements which have data-customTooltip
attribute on them and creating a pseudo-element using :after
. Till now a pseudo-element for the tooltip is created but it's not visible as there is scale(0)
in the style.
Now change the scale to 1 on hover on the parent element.
style.css
[data-customTooltip]:hover:after { display: block; transform: translate(-50%, 110%) scale(1); }
And here is our tooltip....
Position can be changed according to requirement by giving suitable top
, left
, bottom
, and right
values along with translate property.
I'll write another blog where we'll make the position of the tooltip dynamic and also incorporate light and dark themes.
Now just pass data-customTooltip="tooltip text"
attribute wherever you want to add a tooltip.
Codepen demo
PS:- This is my first blog, if there's any mistake I'm making or there's any scope of improvement, please feel free to comment.
Original Link: https://dev.to/thoughtlessmind/tooltip-using-only-css-2oh4
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To