Simple CSS Tooltip with Arrow Position To the Bottom

Simple CSS Tooltip with Arrow Position To the Bottom

Looking for a simple solution to create a CSS tooltip with the help of HTML5 title attribute? Here we have done on with arrow position to the bottom. We will create two different examples of tooltip boxes.

I will prepare two different demes. 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.

The Markup

We have a simple anchor link with some text. We added simple-tooltip an attribute. 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>         

The Styling

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 attr 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.

.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, but we have another example of the tooltip in the demo. You can find it, and it is somewhat similar to this one but used a different design and looked feel.

We used div systems and made them as pagination. I hope you will like both examples of CSS tooltip.

Code ExamplesYou May Also Like