Home / Articles / Programming languages / Markup languages / HTML & CSS / How to create a simple tooltip using only CSS3

How to create a simple tooltip using only CSS3

How to create a simple tooltip using only CSS3
 
How to create a simple tooltip using only CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


This article demonstrates how to create a simple tooltip using only CSS3 with minimal styles. Consider the following example of tooltips for links.

Tooltip is a box with additional information which appears near the element when user hovers the cursor over the element. Tooltips are often used to provide captions for images or descriptions for links. Using them is a good way to provide more information for the user without cluttering the content on the page.

HTML code

<a href="#" data-tooltip-text="Tooltip text" class="tooltip">Just simple text</a>

As can be seen in the code above, the link requires two things:

  • class "tooltip" which is used to apply tooltip styles;
  • data-tooltip-text attribute whose value is used as content for tooltip box.

CSS code

The following styles are used to display links with class "tooltip" as inline elements using relative positioning.

.tooltip {
  display: inline;
  position: relative;
}

Next styles are used to create a tooltip box with rounded corners which contains the content of the current tooltip and position it above the link:

.tooltip:hover:after {
  background-color: #000000; /* for old browsers */
  background-color: rgba(0, 0, 0, 0.85);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  bottom: 26px;
  color: #FFFFFF;
  content: attr(data-tooltip-text);
  left: 20%;
  padding: 5px 10px;
  position: absolute;
  width: 190px;
  z-index: 1000;
}

The style above use hover pseudo-class and after pseudo-element, the first one shows a tooltip box with its content which is inserted by the second one after the selected element (the link with class "tooltip" in this case). Also in the styles RGBA color is used to make tooltip box 85% semi-transparent. Rounded corners for tooltip box are achieved by border-radius CSS property.

The most important thing in the style above is content: attr(data-tooltip-text); which takes value of data-tooltip-text attribute in the current link with class "tooltip" and inserts this value in tooltip box as its content.

The following styles add an arrow and position it in the bottom of the tooltip box.

.tooltip:hover:before {
  border: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent;
  border-width: 8px 8px 0 8px;
  bottom: 18px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 1001;
}

In the styles above a hack with border CSS properties is used to create a pseudo arrow. It sets border colors to transparent for the left and right sides of the block with appropriate border widths.

Live demo


 

Read also

CSS3: multiple backgrounds

CSS3: multiple backgrounds

CSS3: Progressive Internet Explorer (PIE)

CSS3: Progressive Internet Explorer (PIE)

Discussion (total 2 comments)

Paul
February 06, 2014 at 01:48 pm
I took this further over a year ago. http://eichefam.net/2012/12/18/css-tooltips/
Bruno Bezerra
September 20, 2014 at 01:57 pm
Beautiful effect! There were times that I was looking for more information about this effect!

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation