CSS Tooltip
Use CSS to create tooltips.
Demo: Tooltip Examples
When the user places the mouse pointer over an element, a tooltip is frequently used to provide further information about that element:
——ANIMATION MUKAVU——
Basic Tooltip
Make a tooltip that shows up when a user hovers over a component:
Example
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under 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 examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
Example Explained
HTML: Use the “tooltip” class on a container element (such as <div>). The tooltip text will appear when the user moves their cursor over this <div>.
The tooltip text is inserted with class=”tooltiptext” into an inline element (such as <span>).
CSS: In order to position the tooltip text (position:absolute), the tooltip class uses position:relative. Note: The tooltip can be positioned as shown in the examples below.
The actual tooltip text is stored in the tooltiptext class. By default, it is concealed; but, when hovering, it becomes visible (see below). It now has some basic styles added to it as well: a 120px width, a black background, white text, centered text, and 5px padding on top and bottom.
The tooltip text can be given rounded corners by using the CSS border-radius property.
Positioning Tooltips
The tooltip in this example is positioned to the right (left:105%) of the <div> “hoverable” content. Observe that it is positioned in the center of its container element by using top:-5px. Since the tooltip text contains 5px top and bottom padding, we choose the number 5. To make sure it stays in the middle (if desired), increase the value of the top attribute in tandem with increasing its padding. This also holds true if you want the tooltip to be positioned to the left.
Right Tooltip
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Result:
-------ANIMATION MUKAVU-------
Left Tooltip
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Result:
-------ANIMATION MUKAVU-------
See the samples below to determine whether you want the tooltip to show at the top or bottom. It should be noted that the margin-left attribute is used, with a value of -60 pixels. The tooltip will now be centered above or below the hoverable content. It is configured to be half the width of the tooltip (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:
-------ANIMATION MUKAVU-------
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:
-------ANIMATION MUKAVU-------
Tooltip Arrows
Add “empty” content using the pseudo-element class ::after and the content attribute after the tooltip to generate an arrow that will point from a certain side of the tooltip. Borders are used to make the actual arrow. As a result, the tooltip will resemble a speech bubble.
Here’s an example of adding an arrow to the tooltip’s bottom:
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:
-------ANIMATION MUKAVU-------
Example Explained
Place the arrow inside the tooltip like follows: top: 100% will position the tooltip’s arrow at the bottom. Left: The arrow will center at 50%.
Note: The arrow’s size is specified by the border-width attribute. Make sure to adjust the margin-left value to match any changes you make to this. The arrow will stay centered as a result.
The content is changed to resemble an arrow by using the border-color. We choose to make the bottom border transparent and the top border dark. You would have a black square box if all the sides were black.
The addition of an arrow to the tooltip’s top is seen in this example. Observe that this time, we’ve set the color of the bottom border:
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:
-------ANIMATION MUKAVU-------
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:
-------ANIMATION MUKAVU-------
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:
-------ANIMATION MUKAVU-------
Fade In Tooltips (Animation)
You may use the CSS transition property in conjunction with the opacity property to fade in the tooltip text when it is about to become visible. This will cause the tooltip text to go from absolutely invisible to 100% visible in a defined number of seconds—one second in our example—by using these properties:
Example
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
