DEV Community

Cover image for Tooltip with pseudo-elements
Sandeep Sharma
Sandeep Sharma

Posted on • Updated on

Tooltip with pseudo-elements

As we're already aware of how important sometimes a simple tooltip is, be it any website that we're visiting or we're building. It is used to give us more info without just clicking anywhere which is nothing but a huge plus.

Did you know, you can build a simple tooltip without writing any extra markup (HTML)? Yes, we can achieve this by just using pseudo-elements. So let's dive right into the code.

Starting with simple HTML and Styling

To start with this, I am going to setup a simple HTML with some basic styling.

<p> Show me some <span id="tooltip-container">more</span></p>
Enter fullscreen mode Exit fullscreen mode
p {
  font-size: 32px;
  color: white;
  font-family: monospace;
}

#tooltip-container {
  text-decoration: underline;
  postition: relative;
  color: lightblue;
}
Enter fullscreen mode Exit fullscreen mode

Setup Example

Adding a pseudo-element

To add a pseudo element, we're going to use a css selector. We can either use ::before or ::after, both would work but we may have to do some positioning changes. I am going to implement this with ::before but you can also try with ::after.

#tooltip-container::before {
  content: 'The more is here';
  position: absolute;
  background: #0a0a0a;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 15px;
  white-space: nowrap;
  bottom: 100%;
}
Enter fullscreen mode Exit fullscreen mode

After adding the pseudo element
As you can see, we have our pseudo-element which is positioned in a certain way according to the styles that we have put. Looking good for now.

Adding hover effect

We added the element but we do not want it be always there, right? We want it to behave like a tooltip. For that, let's add a hover effect (this is just an example, you can add your own effect as well).

#tooltip-container::before {
  content: 'The more is here';
  position: absolute;
  background: #0a0a0a;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 15px;
  white-space: nowrap;
  bottom: 0;
  transform: scale(0);
  transition: 
    transform 150ms ease-out,
    bottom 150ms ease-out;
}

#tooltip-container:hover::before {
  bottom: 100%;
  transform: scale(1);
}
Enter fullscreen mode Exit fullscreen mode

Tooltip hover effect

Adding dynamic content

This is all good, but we may want to avoid putting tooltip content directly into the css. Do we have a better way? The answer is Yes, we do. We can use the data- attribute in HTML which later can be used as a selector in the CSS. Let's continue with the above example and change a few things.

<p> Show me some <span data-tooltip="New tooltip is here!!">more</span></p>
Enter fullscreen mode Exit fullscreen mode
#span[data-tooltip]::before {
  content: attr(data-tooltip);
 // ... All other CSS Properties are same as previous example
}

#span[data-tooltip]:hover::before {
  // ... All other CSS Properties are same as previous example
}
Enter fullscreen mode Exit fullscreen mode

Tooltip with attribute

Next steps

You can implement this using Javascript. Please try once by yourself, if you still face the issue, please check this codepen where I have implemented the same.

I hope you enjoyed this blog and learned something new. If you have some questions/suggestions, feel free to add them in the comments. Connect with me at Linkedin.

Top comments (4)

Collapse
 
loucyx profile image
Lou Cyx

Ideally you should avoid doing this if you care about a11y. Maybe you can do something similar but instead of using data-tooltip you could use aria-description, and instead of using :hover you could use :focus.

Cheers!

Collapse
 
itssharmasandeep profile image
Sandeep Sharma

Thank you, learned something new :)

Collapse
 
aratinau profile image
Aymeric Ratinaud

Hello, I saw your codepen, is the JS useful?

Collapse
 
itssharmasandeep profile image
Sandeep Sharma

It depends, suppose if you want to have the tooltip changed based on certain conditions then it can be.