DEV Community

loading...
Cover image for Tooltip using only CSS

Tooltip using only CSS

thoughtlessmind profile image Rajiv ・2 min read

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 and CSS
  • 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>
Enter fullscreen mode Exit fullscreen mode

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);
  }
Enter fullscreen mode Exit fullscreen mode

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);
  }
Enter fullscreen mode Exit fullscreen mode

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.

tooltipDemo

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.πŸ˜€

Discussion (8)

pic
Editor guide
Collapse
thetwopct profile image
James Hunt

It’s possible to use CSS and sometimes they might suffice. But the reason why many JS libraries exist for tooltips is to detect when a tip goes off-screen, so before integrating in to a project make sure the length of tool tips is not too long and they never need to be at the edge of screens (mobile etc). Just leaving this as a note before someone integrates the above and wastes their time. Sure the JS adds some overhead but JS/webpack etc can handle loading it only where needed.

Collapse
thoughtlessmind profile image
Rajiv Author

yp.. I totally agree with you. Using this method gonna suck after some time. I've made this just to showcase what CSS is capable of.

Collapse
sroehrl profile image
neoan

This is a great little trick and a good reminder what CSS content can do!

Collapse
thoughtlessmind profile image
Rajiv Author

agree.. In recent years, CSS has became much more capable of doing than one can imagine.

Collapse
zfett profile image
Zachary Fetters

Completely forgot about the "attr()" feature in CSS, thanks for this!

Collapse
thoughtlessmind profile image
Rajiv Author

πŸ˜€

Collapse
peterpeartree profile image
PeterPeartree

Hi Rajiv

Great post as I was asked to add a tooltip by a client, and was thinking JavaScript etc.

You've shown two CSS declarations above. Do I need to add both of these to the stylesheet, or can they be merged into one?

Collapse
thoughtlessmind profile image
Rajiv Author

Thank you very much for your appreciation.
For the tooltip, responsible CSS are those which starts with [data-customTooltip] . Rest CSS there are for other stylings...