Simple CSS Tooltip with Arrow Position To the Bottom

Do you want to create a simple CSS based tooltip with arrow? Yes, you are at the right place. Here, you’ll find the step by step guide with source code.

I will prepare two different demos. The first one work with anchor link and the title attribute. The tooltip box will show on mouse hover without having any animation. It will have an orange background color and work some nice black text and have an arrow toward the bottom.

The second example, We did create comes with some nice animation when the mouse hovers the dot navigation. It’s created especially for users who want to show the tooltip on slider navigation. It also uses the title HTML5 data-title attribute but works with DIV HTML element.

If you need a basic cross-browser tooltip on your website then this is perfect for you because of its light-weight and build with only CSS.

Prepare HTML Structure for Tooltip

We have a simple anchor link with some text. So, we added simple-tooltip an attribute that we have placed this anchor link inside the div with the class name rxtooltip.

<div class="rxtooltip">
  <a href="#" simple-tooltip="I’m simple tooltip.">Hover me! I am tooltip.</a>
</div>         

Design & Reveal Tooltip with CSS

Let’s start using with  :after and :before CSS elements to handle the tooltip. We used both these elements on hover too. The thing we need to do to set the position relative and z-index for the attribute.

.rxtooltip [simple-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

We will start playing with :before and :after. These both have their visibility to be hidden by default. We will also use some filter for opacity.

Here the position should be absolute with a bottom to be 150% and the left will be 50%.

.rxtooltip [simple-tooltip]:before,
.rxtooltip [simple-tooltip]:after {
	position: absolute;
	bottom: 150%;
	left: 50%;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

Now come back to :before CSS property where we will add attribute and style the tooltip box.

.rxtooltip [simple-tooltip]:before {
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 10px;
  width: 160px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #F75600;
  background-color: #F75600;
  color: #000;
  content: attr(simple-tooltip);
  text-align: center;
  font-size: 18px;
  line-height: 1.2;
}

For :after will be used to handle the arrow that will show the bottom of the tooltip box.

.rxtooltip [simple-tooltip]:after {
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #F75600;
  border-top: 5px solid #F75600;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

Finally, we will set the opacity to be 1 on-hover for both :after and :before pseudo elements.

.rxtooltip [simple-tooltip]:hover:before,
.rxtooltip [simple-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

That’s a process of implementing simple CSS tooltip with arrow. You can find it, and it is somewhat similar to this one but used a different design and looked feel.