CSS Tooltip — TutorialBrain

Tooltip is a small pop-up window that provides an extra small note about an element or item which is pointed. So basically it is like a hint to the user.

Normally, the small note is hidden at first and when the user hovers over the link, the note is displayed to the user which provides an extra information.

The best example of tooltip is when the user tries to enter the information in a form, you can create the tooltip for important fields to guide the users.

Just hover your mouse on the below Link(TutorialBrain) and notice how a hint appears while your mouse is over the link.

TutorialBrain Link to the Home Page

Let us see some tooltip examples –

How to create tooltip?

Create a wrapper like div.
Create another div or span or section inside it with a class-name or id to contain the text.
The tooltip must be hidden by default at start so you can try using these properties and see which works best for your requirement like – visibility: hidden or display: none etc. Optionally, you can code position:relative to the wrapper element.
When the user hovers over it, the tooltip should be displayed. For this, you can use visibility: visible or display:block etc. You can code position: absolute if you have code position:relative on the wrapper
Of course, you can add features like opacity, transition, transform, width, border, padding, margin etc.

Let us create a simple basic tooltip with the things we have discussed.

CSS Simple Tooltip

This is just a simple tooltip. When you continue further, you will see various ways of creating advanced tooltips.

Example of Simple Tooltip

.Simple-tooltip .tt-content {
  visibility: hidden;
  background-color: gray;
  padding: 3px;
  color: white;
}

.Simple-tooltip:hover .tt-content {
  visibility: visible;
}

CSS Tooltip with images

There can be a tooltip in form of image as well. For this, simply create an inner div(or span or section) with an image. In the example below, it is –

<img src="img/purpleflower.jpg" width=80px height=50px/>

Example for Tooltip with images

HTML
----
<h3>Example for Tooltip with Image</h3>
<div class="tooltip-img">Tooltip Arrow
   <span class="tt-img"><img src="img/purpleflower.jpg" width=80px height=50px /><br> Purple Flower</span>
</div>

CSS
---
.tooltip-img {  
  position: relative;
  display:inline-block;
  font-size: 25px;
  text-align:left;
} 
.tooltip-img .tt-img {
  visibility: hidden;
  padding: 5px;
  background:skyblue;
  position: absolute;
  left: 140%;
  top:-50%;
  margin-left: -50px;
}
.tooltip-img:hover .tt-img{
  visibility: visible;
}

CSS Tooltip On Click

In few scenarios, you may wish to show the tooltip when you click on a particular element through your mouse.

The important point to note here is that you need to include <input type=“checkbox”> and you can use the pseudo class :checked to create the toggle effect.

CLICK METhank You

Example of CSS Tooltip On Click

HTML
----
<label class="tooltip">Tooltip On Click <input type="checkbox">
<span> Click to toggle again</span>
</label>

CSS
---
.tooltip {
  position: relative;
  border-bottom: 1px dotted red;
}
.tooltip span {
  visibility: hidden;
  position: absolute;
  width:200px;
  background:linear-gradient(pink, hotpink);
  padding: 5px;
  top: -5px;
  left:  100%;
  margin-left:10px;
  z-index:1;
}
.tooltip input {
  display:none;
}
.tooltip input:checked+span {
  visibility: visible;
}

CSS Tooltip Position

You can position the tooltip as per your requirement.

For Example:

Top side of the Text
Right side of the Text
The Bottom side of the Text
At the Left side of the Text

It is easy to create the Tooltip at the top, bottom, right or left. For this, you need to use the combination of these properties like –

top
bottom
left
right

In the examples below, we are using the above properties to create the top, bottom, left or right tooltip but we can also use the below properties as well –

margin-left
margin-right
margin-top
margin-bottom

Just to clarify that there is no fixed rule that we need to use all the above properties or any fixed 2 properties and so on. You need to try the combination of these properties and see which fits your requirement.

Tooltip on right

In the below example, we are using bottom and left properties.

Example of Tooltip on right

.youtube-icon {
  font-size: 100px;
  color: red;
}

.wrapper-tooltip {
  position: relative;
  display: inline-block;
}

.wrapper-tooltip .tooltip-right {
  visibility: hidden;
  bottom: 35px;
  left: 90px;
  background-color:red;
  color: white;
  padding: 5px 10px;
  position: absolute;
}

.wrapper-tooltip:hover .tooltip-right {
  visibility: visible;
}

Tooltip on left

In the below example, we are using top and left properties.

Example for Tooltip on left

.google-plus {
  font-size: 100px;
  color: #DD5144;
}

.wrapper-tooltip {
  position: relative;
  display: inline-block;
  left:100px;
  top:5px;
}

.wrapper-tooltip .tooltip-left {
  visibility: hidden;
  bottom: 35px;
  right: 90px;
  background-color:#DD5144;
  color: white;
  padding: 5px;
  position: absolute;
}

.wrapper-tooltip:hover .tooltip-left {
  visibility: visible;
}

Tooltip on top

In the below example, we are using top and left properties.

Example for Tooltip on top

.Windows-icon {
  font-size: 100px;
  color: slateblue;
}	 
.top-side {
  position: relative;
  display: inline-block;
  left:100px;
  top:100px;
}

.top-side .tooltip-top {
  visibility: hidden;
  top: -35px;
  background-color:black;
  color: white;
  padding: 5px 10px;
  position: absolute;
  transition: opacity 2s;
}

.top-side:hover .tooltip-top {
  visibility: visible;
}

Tooltip on bottom

In the below example, we are using bottom and left properties.

Example of Tooltip on bottom

.html-icon {
  font-size: 100px;
  color: #E85D25;
}
.wrapper-tooltip {
  position: relative;
  display: inline-block;
  left:50px;
  font-size:0.9em;
}
.wrapper-tooltip .tooltip-bottom {
  visibility: hidden;
  bottom: -10px;
  background-color:black;
  color: white;
  position: absolute;
}

.wrapper-tooltip:hover .tooltip-bottom {
  visibility: visible;
}

Tooltip Arrow

To create a tooltip arrow, follow the steps-

Code the wrapper div with position:relative. It is better to set display:inline-block as well in the wrapper
Set the position:absolute for the tooltip and the arrow
Move the tooltip and arrow using the left, top, bottom, or right properties.
Set the width of the tooltip if you want to create a tooltip with proper width width values
Add a blank content before or after the tooltip using the pseudo class “::before” or “::after” along with generated content(content property). If you use the ::before pseudo class, then the generated content(i.e. arrow) will come before the content(i.e. before the hint or the note). If you use the ::after pseudo class, then the generated content(i.e. arrow) will come after the content(i.e. after the hint or the note)
Code the border-width, border-style & border-color to create the arrow

Note/Info/Success/Warning

Tooltip with Arrow is interesting but if you do not understand it properly, it can go wrong in a big way.

You can also try to create tooltip with right arrow, tooltip with bottom arrow and tooltip with top arrow.

Example of Tooltip Arrow

.lt-tooltip {  
  position: relative;
  display:inline-block;
}
.lt-tooltip .left-arrow {
  visibility: hidden;
  border:2px solid green;
  padding: 5px;
  position: absolute;
  left: 102px;
  width:100px;
  top:-7px;
}

.left-arrow::before {
 content: " ";
 position: absolute;
 right: 100%;
 border-width: 10px;
 border-style: solid;
 border-color: transparent green transparent transparent;  
 /* border-color: red green blue yellow; */
}

.lt-tooltip:hover .left-arrow {
   visibility: visible;
}

You can also apply other properties like margin-left, margin-right, margin-top or margin-bottom like below –

margin-top: -10px;
/* margin-top is -10px before the left-arrow so the left arrow will move up from the center */

Similarly, you can also use top property like –

top: 50%;
/*From top, slide down 50% so that arrow is at the center of the side */