How to Create a Custom Tooltip with Pure CSS
Tags: html, css, tutorial, beginners
Published: 2020-10-26 07:48:28

I always find the standard tooltip in browsers a bit boring, so I usually implement a custom one.

The standard tooltip can be used by adding the title attribute to any Html element. When the user hovers over the element, the tooltip will show up after a short delay. Like this:

> <h4 title="Looks boring and takes too long to show, right?!">Hover over me</h4>
---

```
<h2 title="DEV is a community of software developers">
Dev.to
</h2>
```
---
For the custom tooltip we need three items:
- The element that contains the tooltip
- A hovercard that contains the tooltip and is only visible when we hover over the element
- The tooltip content itself

---
In my example I have a list of links and when we hover over the link, we can see a short summary of the target of that link.

Let's create the Html first. 

```
<li class="recent-link">
  <a href="https://www.crumb-collector.com">Crumb Collector</a>
  <span class="hovercard">
    <div class="tooltiptext">
      Crumb Collector is a minimal and easy to use bookmark manager.
    </div>
  </span>
</li>
```

We now have a list-item element that contains a link, the hovercard and the tooltiptext.

---
First we style the list-item. We have to assign the position property, so that we can position its children relative to it. 

```
.recent-link {
  position: relative;
  color: #252525;
  padding-bottom: 18px;
  font-size: 1rem;
}

```
---
Next we position the hovercard. We make it invisible at first by setting `opacity: 0`. The opacity changes to `opacity: 1` when we hover over `.recent-link`.
By using `z-index: 1` we make sure that is displayed on top of other content with a lower `z-index` (by default 0).
The positioning depends on the length and content of the tooltip. The longer the content, the more we have to offset the hovercard.

```
.hovercard { 
  position: absolute; 
  opacity: 0; 
  z-index: 1;
  left: 50%;
  top: -90px;
  transform: translateX(-50%);
}

.recent-link:hover .hovercard { 
  opacity: 1; 
  transition: 0.5s;
  transition-delay: 0.1s;
}
```
---
Finally we style the tooltip itself, for example like this.

```
.tooltiptext {
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  background-color: #0366d6;
  padding: 18px; 
  border-radius: 5px; 
  color: white; 
  line-height: 15px;
  transition: 1s;
  width: 200px;
}
```
Which looks like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/saga1p54pjqiyvpkbdtm.gif)


---
We can do anything we want inside the tooltiptext-class. 

Let's say we want to display additional information about a user when we hover over the avatar (inspired by Squarespace). 

```
  <div class="hovercard">
        <div class="cover-image">
          <div class="avatar">A
          </div>
          <div class="username">Plain Water</div>
        </div>
        <div class="points">2,345</div>
        <ul class="stats">
          <li class="stats-item">Content Count: </li>
          <li class="stats-item">Joined: </li>
          <li class="stats-item">Last Visited: </li> 
        </ul>
      </div>
``` 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o9jr8biyv4xi6pi6a6e2.gif)


---
## Final Words

Thanks for checking out this tutorial. Please let me know, if it is helpful and if you are interested in seeing more like this.
If you have any questions, just let me know in the comments or shoot me a message.