DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Create a Custom Tooltip with Pure CSS
Marian
Marian

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Which looks like this:

Alt Text


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>
Enter fullscreen mode Exit fullscreen mode

Alt Text


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.

Top comments (4)

Collapse
pierreatwork profile image
Pierre

Nice ! Thanks !

Collapse
farnerud profile image
Hector Perea Mosquera

Sweet! Thanks a lot.

Collapse
firesideediting profile image
Fireside Editing

Love it! Is there a way to remove the requirement for a link, and make it so you have to click on the text for the tooltip to appear?

Collapse
rckshnv profile image
Π’ΠΎΠ»ΠΈΠΊ

Thank you! Have done a lovely tooltip based on this!

DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or host your own.
Β 
Check these out! πŸ‘‡