Loading lesson path
Concept visual
Start at both ends
Overview
A CSS tooltip is used to specify extra information about something when the user moves the mouse pointer over an element:
Create a tooltip that appears when the user moves the mouse over an element:
<style>
/* 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 class="tooltip">
<span class="tooltiptext">
</span> </div>
Formula
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.
Formula
The tooltip text is placed inside an inline element (like < span >) with class ="tooltiptext".The tooltip class use position:relative, which is needed to position the tooltip text ( position:absolute ).
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.
Formula
:hover selector is used to show the tooltip text when the user moves the mouse over the < div > with class ="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.
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.
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.
Formula
Right - aligned tooltip:.tooltiptext {top: -5px;left:
105%;
}