CSS Tooltips
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tooltips</title>
<style>
.tooltip1,.tooltip2,.tooltip3,.tooltip4,.tooltip5,.tooltip6,.tooltip7,.tooltip8 {
position: relative;
display: inline-block;
border-bottom: 2px dotted grey;
}
* {
text-align: center;
}
.tooltip1 .tooltip-text1 {
width: 100px;
color: white;
background-color: black;
border-radius: 6px;
visibility: hidden;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5%;
left: 105%;
}
.tooltip1:hover .tooltip-text1{
visibility: visible;
border: none;
}
.tooltip2 .tooltip-text2 {
width: 100px;
color: white;
background-color: black;
border-radius: 6px;
visibility: hidden;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5%;
right: 105%;
}
.tooltip2:hover .tooltip-text2{
visibility: visible;
border: none;
}
.tooltip3 .tooltip-text3 {
width: 100px;
color: white;
background-color: black;
border-radius: 6px;
visibility: hidden;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -50px;
}
.tooltip3:hover .tooltip-text3{
visibility: visible;
border: none;
}
.tooltip4 .tooltip-text4 {
width: 100px;
color: white;
background-color: black;
border-radius: 6px;
visibility: hidden;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -50px;
}
.tooltip4:hover .tooltip-text4{
visibility: visible;
border: none;
}
.tooltip5 .tooltip-text5 { /* For Arrow down*/
width: 120px;
color: white;
background-color: red;
border-radius: 6px;
visibility: hidden;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 105%;
right: -5%;
/* margin-left: -50px; */
}
.tooltip5 .tooltip-text5::after{
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5%;
border-width: 5px;
border-style: solid;
border-color: blue transparent transparent transparent ;
}
.tooltip5:hover .tooltip-text5{
visibility: visible;
border: none;
}
.tooltip6 .tooltip-text6 { /* For Arrow Up*/
width: 120px;
color: white;
background-color: red;
border-radius: 6px;
visibility: hidden;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 105%;
right: -5%;
/* margin-left: -50px; */
}
.tooltip6 .tooltip-text6::after{
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5%;
border-width: 5px;
border-style: solid;
border-color: transparent transparent blue transparent ;
}
.tooltip6:hover .tooltip-text6{
visibility: visible;
border: none;
}
.tooltip7 .tooltip-text7 { /* For Arrow Right*/
width: 120px;
color: white;
background-color: red;
border-radius: 6px;
visibility: hidden;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -15%;
right: 105%;
/* margin-left: -50px; */
}
.tooltip7 .tooltip-text7::after{
content: " ";
position: absolute;
top: 30%;
left: 105%;
margin-left: -5%;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent blue ;
}
.tooltip7:hover .tooltip-text7{
visibility: visible;
border: none;
}
.tooltip8 .tooltip-text8 { /* For Arrow Left*/
width: 120px;
color: white;
background-color: red;
border-radius: 6px;
visibility: hidden;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -15%;
left: 105%;
opacity: 0; /* To add animation in Tooltip use opacity with transition effect opacity from 0 to 1*/
transition: 1.5s;
/* margin-left: -50px; */
}
.tooltip8 .tooltip-text8::after{
content: " ";
position: absolute;
top: 30%;
right: 100%;
margin-left: -5%;
border-width: 5px;
border-style: solid;
border-color: transparent blue transparent transparent ;
}
.tooltip8:hover .tooltip-text8{
visibility: visible;
opacity: 1;
border: none;
}
</style>
</head>
<body>
<!-- Tooltip Positions -->
<div class="tooltip1">Hover over me!
<span class="tooltip-text1">
Tooltip right
</span>
</div> <br> <br>
<div>Tooltips are used to give some extra information about anything in the top, right, bottom or left etc.</div>
<div class="tooltip2">Hover over me!
<span class="tooltip-text2">
Tooltip left
</span>
</div> <br> <br>
<div>Tooltips are used to give some extra information about anything in the top, right, bottom or left etc.</div>
<div class="tooltip3">Hover over me!
<span class="tooltip-text3">
Tooltip top
</span>
</div> <br> <br>
<div>Tooltips are used to give some extra information about anything in the top, right, bottom or left etc.</div>
<div class="tooltip4">Hover over me!
<span class="tooltip-text4">
Tooltip bottom
</span>
</div> <br> <br>
<div>Tooltips are used to give some extra information about anything in the top, right, bottom or left etc.</div>
<!-- Tooltip Arrows -->
<br> <br>
<h2>Tooltip Arrow</h2>
<div class="tooltip5">Hover over me Arrow Down!
<span class="tooltip-text5">
Down arrow
</span>
</div> <br> <br>
<div>Tooltips are used to give some extra information about anything in the top, right, bottom or left etc.</div>
<br>
<div class="tooltip6">Hover over me Arow Up!
<span class="tooltip-text6">
Down arrow
</span>
</div> <br> <br>
<div>Tooltips are used to give some extra information about anything in the top, right, bottom or left etc.</div>
<br>
<div class="tooltip7">Hover over me Arow Right!
<span class="tooltip-text7">
Right arrow
</span>
</div> <br> <br>
<div>Tooltips are used to give some extra information about anything in the top, right, bottom or left etc.</div>
<br>
<div class="tooltip8">Hover over me Arow Left!
<span class="tooltip-text8">
Left arrow
</span>
</div> <br> <br>
<div>Tooltips are used to give some extra information about anything in the top, right, bottom or left etc.</div>
</body>
</html>
No comments:
Post a Comment