CSS Tooltips
- Previous Page CSS Animations
- Next Page CSS Image Styles
Create tooltips (Tooltip) using CSS.
Demonstration: Tooltip
Example
When the user moves the mouse pointer over an element, a tooltip is usually used to provide additional information about the content:
Basic tooltip
Create a tooltip that appears when the mouse is moved over an element:
Example
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you need to show a dotted line below the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see the example below */
position: absolute;
z-index: 1;
}
/* Show tooltip text when the mouse hovers over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
Example Explanation
HTML:
using the container element (such as <div>) and adding "tooltip" class. When the user hovers over this <div>, the tooltip text is displayed.
The tooltip text is located in class="tooltiptext" of embedded elements (such as <span>).
CSS:
tooltip class uses position:relativeto place the tooltip text (position:absolute). Note: For instructions on how to position the tooltip, see the example below.
tooltiptext class saves the actual tooltip text. By default, it is hidden and becomes visible when the mouse hovers over it (see below). We also added some basic styles: 120px width, black background, white text, text centered, and 5px top and bottom inner padding (padding).
CSS border-radius property is used to add rounded corners to the tooltip text.
when the user moves the mouse over the <div> with class="tooltip",:hover selector is used to display the tooltip text.
Positioning the tooltip
In this example, the tooltip is located to the right of the 'hoverable' text (<div>)left:105%). Also note thattop:-5px used to position it in the middle of its container element. We use the number 5 because the top and bottom inner padding of the tooltip text are both 5px. If you increase its inner padding, please also increase top The value of the property ensures that it stays in the middle. It also applies if you want to place the tooltip on the left.
Right tooltip
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Result:
Left tooltip
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Result:
If you want the tooltip to be at the top or bottom, see the example below. Note that we use a negative 60px left margin property (margin-left). This is to center the tooltip with the hoverable text. This value is half of the tooltip width (120/2 = 60).
Top tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
Result:
Bottom tooltip
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
Result:
Tooltip arrow
To create an arrow that appears on the specified side of the tooltip, add 'empty' content after the tooltip and use the pseudo-element class ::after and content property. The arrow itself is created using the border, making the tooltip look like a bubble.
This example demonstrates how to add an arrow to the bottom of the tooltip:
Bottom arrow
.tooltip .tooltiptext::after {
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 Explanation
positions the arrow inside the tooltip:top: 100% places the arrow at the bottom of the tooltip.left: 50% will center the arrow.
Note:border-width property specifies the size of the arrow. If you change this setting, also change margin-left changing the value to the same value will center the arrow.
border-color used to convert content into an arrow. We set the top border to black and the rest to transparent. If all sides are black, the final result will be a black square box.
This example shows how to add an arrow to the top of the tooltip. Note that this time we have set the border color at the bottom:
Top arrow
.tooltip .tooltiptext::after {
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
.tooltip .tooltiptext::after {
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
.tooltip .tooltiptext::after {
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 (Animation)
If you want to fade in and out the tooltip text that is about to be displayed, you can use CSS transition property with opacity When used together, the properties will fade from completely invisible to 100% visible over the specified number of seconds (in the example, 1 second):
Example
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Previous Page CSS Animations
- Next Page CSS Image Styles
