CSS Tooltip (Short Info Dialog)
Create tooltips with CSS.
Demo: Tooltip Examples
A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:
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; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: white;
color: #000;
border: 1px solid #e6e6e6;
text-align: center;
padding: 5px 0;
border-radius: 20px;
/* 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 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 tooltip class
use position:relative, which is needed to position the
tooltip text
(position:absolute). Note: See
examples below on how to position the tooltip.
The tooltiptext class holds the actual tooltip text. It
is hidden by default, and will be visible on hover (see below). We have also
added some basic styles to it: 120px width, white background color, black text
color, centered text, and 5px top and bottom padding.
The CSS border-radius property is used to add rounded
corners to the tooltip text.
The :hover selector is used to show the tooltip text
when the user moves the mouse over the <div>
with class="tooltip".
Positioning Tooltips
In this example, the tooltip is placed to the right (left:105%)
of the "hoverable" text (<div>). Also note
that top:-5px is used to place it in the middle of its
container element. We use the number 5 because the
tooltip text has a top and bottom padding of 5px. If you increase its padding,
also increase the value of the top 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.
Right Tooltip
top: -5px;
left: 105%;
}
Result:
Left Tooltip
top: -5px;
right: 105%;
}
Result:
If you want the tooltip to appear on top or on the bottom, see examples below.
Note that we use the margin-left property with a value
of minus 60 pixels. This is to center the tooltip above/below the hoverable
text. It is set to the half of the tooltip's width (120/2 = 60).
Top Tooltip
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
Result:
Bottom Tooltip
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), 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
the content 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: blue 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: The border-width property
specifies the size of the arrow. If you change this, also change
the margin-left value to the same. This will keep the
arrow centered.
The border-color is used to transform the content into
an arrow. We set the top border to blue, and the rest to transparent. If all
sides were blue, 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 blue 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 blue 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 blue;
}
Result:
Fade In Tooltips (Animation)
If you want to fade in the tooltip text when it is about to be visible, you
can use the CSS transition property together with
the opacity property, and go from being completely
invisible to 100% visible, in a number of specified seconds (1 second in our
example):
Example
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
Comments
Post a Comment