Simple Custom Tooltip With Pure CSS (Step-By-Step With Video)

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.

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

[web_stories_embed url=”https://code-boxx.com/web-stories/custom-tooltip-with-html-css/” title=”Custom Tooltip With HTML CSS” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

 

TABLE OF CONTENTS

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

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short 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.

 

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.

 

THE DEMO

 

 

THE 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

/* (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 story, 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.

 

 

 

CSS-ONLY RESTRICTION

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 hiccup when the tooltip is too close to the edge of the screen – It gets clipped off. So ensure that there is always sufficient padding space around the content to display the tooltip.

 

 

LINKS & REFERENCES

• Responsive CSS Speech Bubbles – Code Boxx
• Example on CodePen – Pure CSS Custom Tooltip

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET