Tooltip with pseudo-elements
Tags: webdev, css, beginners, html
Published: 2022-06-17 10:23:19

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.
```html
<p> Show me some <span id="tooltip-container">more</span></p>
```
```css
p {
  font-size: 32px;
  color: white;
  font-family: monospace;
}

#tooltip-container {
  text-decoration: underline;
  postition: relative;
  color: lightblue;
}
```
![Setup Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17nj85k8qoxl46twlyvn.png)
 
### 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`.
```css
#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%;
}
```
![After adding the pseudo element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw6m2eed39j3fp6rcgu0.png)
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).
```css
#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);
}
```
![Tooltip hover effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/990yeih1r7dqj8t4ctg3.gif)

### 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.
```html
<p> Show me some <span data-tooltip="New tooltip is here!!">more</span></p>
```
```css
#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
}
```
![Tooltip with attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4jz1nk0ct9trv2e97v5.png)

### Next steps
You can implement this using Javascript. Please try once by yourself, if you still face the issue, please check this [codepen](https://codepen.io/itssharmasandeep/pen/jOZXerR) 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](https://www.linkedin.com/in/itssharmasandeep/).