5 Steps To Create A Simple Custom Tooltip With Pure CSS

Welcome to a quick tutorial on how to create a simple custom tooltip using pure CSS. Sick of those default boring yellow tooltip boxes? Yes, we can actually create our own custom tooltips in just a few simple steps.

Use the HTML data attribute alongside CSS to create a custom tooltip:

  1. Set a data-tooltip property on the HTML element. For example, <i data-tooltip="TIP">TERM</i>
  2. Build the tooltip using the before pseudo-class – [data-tooltip]::before { content: attr(data-tooltip); }
  3. Set the position of the tooltip.
    • [data-tooltip] { position: relative; display: inline-block; }
    • [data-tooltip]::before { position: absolute; bottom: 100%; }
  4. Show the tooltip only on mouse hover.
    • [data-tooltip]::before { visibility: hidden; }
    • [data-tooltip]:hover::before { visibility: visible; }
  5. Lastly, add some cosmetics on the tooltip box itself.
    • [data-tooltip]::before { background: red; min-width: 100px; }

That covers the quick basics, but read on for the demo and example!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Custom Tooltip Useful Bits & Links
Tutorial Video The End

 

DOWNLOAD & NOTES

First, here is the download link to the example source code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

CUSTOM TOOLTIP WITH PURE HTML CSS

All right, let us now into the example of a custom tooltip using only pure HTML and CSS.

 

THE DEMO

Lorem ipsum dolor sit amet, Demo – Top consectetur adipiscing elit. Demo – Bottom Ut fringilla placerat accumsan. Demo – Left Maecenas elit dui, consectetur nec justo id, accumsan vestibulum mi. Demo – Right

 

THE HTML

simple-tooltip.html
<p id="demo">
  Lorem ipsum dolor sit amet,
  <i data-tooltip="Top Tip" class="top">Demo - Top</i>
  consectetur adipiscing elit.
  <i data-tooltip="Bottom Tip" class="bottom">Demo - Bottom</i>
  Ut fringilla placerat accumsan.
  <i data-tooltip="Left Tip" class="left">Demo - Left</i>
  Maecenas elit dui, consectetur nec justo id, accumsan vestibulum mi.
  <i data-tooltip="Right Tip" class="right">Demo - Right</i>
</p>

Yep, that is actually all we need for the HTML. Just define a custom data-tooltip on the element that you want a tooltip on.

 

 

THE CSS

simple-tooltip.html
/* (A) BUILD TOOLTIP USING BEFORE PSEUDO-CLASS */
[data-tooltip]::before {
  content: attr(data-tooltip);
}

/* (B) POSITION TOOLTIP */
[data-tooltip] {
  position: relative;
  display: inline-block;
}
[data-tooltip]::before {
  position: absolute;
  z-index: 999;
}
[data-tooltip].top::before {
  bottom: 100%;
  margin-bottom: 10px;
}
[data-tooltip].bottom::before {
  top: 100%;
  margin-top: 10px;
}
[data-tooltip].left::before {
  right: 100%;
  margin-right: 10px;
}
[data-tooltip].right::before {
  left: 100%;
  margin-left: 10px;
}

/* (C) SHOW TOOLTIP ONLY ON HOVER */
[data-tooltip]::before {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s;
}
[data-tooltip]:hover::before {
  visibility: visible;
  opacity: 1;
}

/* (D) STYLE THE TOOLTIP */
[data-tooltip] { background: #fea; }
[data-tooltip]::before {
  background: #4a89fb;
  color: #fff;
  padding: 5px;
  min-width: 100px;
  text-align: center;
}

This may look confusing at first, but keep calm and look carefully. This is essentially the same steps in the above introduction, but with more goodies.

  1. Same old mechanic, use [data-tooltip]::before to build the custom tooltip.
  2. Position the tooltip using absolute position and top right bottom left.
  3. Captain Obvious to the rescue, show the tooltip only on mouse hover.
  4. Lastly, some cosmetics on the tooltip box itself.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

RESTRICTIONS

Without the use of Javascript to detect spaces, the CSS tooltip may not be 100% accurate with the positioning. As you can see, there will be a few hiccups when inline elements are broken into 2 lines.

Also, beware of the tooltip direction – A right tooltip on an element that is flushed to the right side may end up being pushed out of the screen. Play with the top bottom left right and see what works best for you.

 

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Custom Tooltip With Pure CSS (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *