Tooltip with pseudo-elements

#webdev #css #beginners #html

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>

p {
  font-size: 32px;
  color: white;
  font-family: monospace;
}

#tooltip-container {
  text-decoration: underline;
  postition: relative;
  color: lightblue;
}

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%;
}

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);
}

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>

#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
}

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.