How to Create a Custom Tooltip with Pure CSS

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:

Hover over me

---

<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:

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>

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.