|
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
Right TooltipMove the mouse over the text below: Hover over me
Tooltip text
|
Mohammed the Prophet (peace be unto him), Who is |
 |
printer friendly |
|
|
$
'.tipso').tipso();
|
|
|
There is a sever evil which I have seen under the sun: |
this is only a test
|
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
Move the mouse over the text below: Hover over me
Tooltip text
Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way. |