CSSTooltip
CSS Tooltip
A CSS tooltip is used to specify extra information about something when the user moves the mouse pointer over an element:
CSS Create a Basic Tooltip
Create a tooltip that appears when the user moves the mouse over an element:
Example
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Add dots under the hoverable text */
cursor: pointer;
}
/* Tooltip text */
.tooltiptext {
visibility: hidden; /* Hidden by default */
width: 130px;
background-color: black;
color: #ffffff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1; /* Ensure tooltip is displayed above content */
}
/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div>Hover over me
<span class="tooltiptext">Some tooltip text</span>
</div>
Example Explained
HTML:
- Use a container element (like <div>) and add the
"tooltip"class to it. When the user mouse over this <div>, it will show the tooltip text. - The tooltip text is placed inside an inline element (like <span>) with
class="tooltiptext".
CSS:
- The
tooltipclass useposition:relative, which is needed to position the tooltip text (position:absolute).Tip: See examples below on how to position the tooltip. - The
tooltiptextclass holds the actual tooltip text. It is hidden by default, and will be visible on hover. - The
:hoverselector is used to show the tooltip text when the user moves the mouse over the <div> withclass="tooltip".
Positioning the Tooltip
You can position the tooltip as you like. Here we will show how to position the tooltip to the left, right, top and bottom.
Right- and Left-aligned Tooltip
In this example, the tooltip is placed to the right (left:105%) of the "hoverable" text (<div>). Also note thattop:-5px is used to place it in the middle of its container element. We use the number5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of thetop property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left.
Example
Right-aligned tooltip:
top: -5px;
left: 105%;
}
Result:
Example
Left-aligned tooltip:
top: -5px;
right: 105%;
}
Result:
Top- and Bottom-aligned Tooltip
If you want the tooltip to appear on top or on the bottom, see examples below. Note that we use themargin-left property with a value of minus 65 pixels. This is to center the tooltip above/below the hoverable text. It is set to the half of the tooltip's width (130/2 = 65).
Example
Top-aligned tooltip:
width: 130px;
bottom: 100%;
left: 65%;
margin-left: -65px; /* Use half of the width (130/2 = 65), to center the tooltip */
}
Result:
Example
Bottom-aligned tooltip:
width: 130px;
top: 100%;
left: 50%;
margin-left: -65px; /* Use half of the width (130/2 = 65), to center the tooltip */
}
Result:
Tooltip Arrows
To create an arrow that should appear from a specific side of the tooltip, add "empty" content after tooltip, with the pseudo-element class::after together with thecontent property. The arrow itself is created using borders. This will make the tooltip look like a speech bubble.
This example demonstrates how to add an arrow to the bottom of the tooltip:
Bottom Arrow
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Result:
Example Explained
Position the arrow inside the tooltip:top: 100% will place the arrow at the bottom of the tooltip.left: 50% will center the arrow.
Note: Theborder-width property specifies the size of the arrow. If you change this, also change themargin-left value to the same. This will keep the arrow centered.
Theborder-color is used to transform the content into an arrow. We set the top border to black, and the rest to transparent. If all sides were black, you would end up with a black square box.
This example demonstrates how to add an arrow to the top of the tooltip. Notice that we set the bottom border color this time:
Top Arrow
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Result:
This example demonstrates how to add an arrow to the left of the tooltip:
Left Arrow
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Result:
This example demonstrates how to add an arrow to the right of the tooltip:
Right Arrow
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Result:
Fade-in Tooltip
If you want a tooltip that fades in, use the CSStransition property and theopacity property, and go from being completely invisible to 100% visible, in a number of specified seconds (2 second in our example):
Example
opacity: 0;
transition: opacity 2s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
