<style type="text/css">
.tooltip {
position: relative;
opacity: 0;
padding: 10px;
background: #9B59B6;
color: white;
font-family: comic sans ms;
border-radius: 5px;
-webkit-transition:all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
transition:all 0.2s ease-in;
}
a{
color: #bfd04d;
font-family: 'montserrat';
padding: 10px;
text-decoration: none;
}
a.show:hover + span.tooltip {
opacity:1;
}
</style>
<div class="wrapper">
<a href="#" class="show">Hover Me !</a>
<span class="tooltip">Hello ! This is tooltip....</span>
<br />
<a href="#" class="show">Hover Me !</a>
<span class="tooltip">Hello ! This is another tooltip....</span>
</div>
Output :)
1)
2)
.tooltip {
position: relative;
opacity: 0;
padding: 10px;
background: #9B59B6;
color: white;
font-family: comic sans ms;
border-radius: 5px;
-webkit-transition:all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
transition:all 0.2s ease-in;
}
a{
color: #bfd04d;
font-family: 'montserrat';
padding: 10px;
text-decoration: none;
}
a.show:hover + span.tooltip {
opacity:1;
}
</style>
<div class="wrapper">
<a href="#" class="show">Hover Me !</a>
<span class="tooltip">Hello ! This is tooltip....</span>
<br />
<a href="#" class="show">Hover Me !</a>
<span class="tooltip">Hello ! This is another tooltip....</span>
</div>
Output :)
1)
2)
No comments:
Post a Comment