Monday, October 13, 2014

Simple ToolTip ...!

<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)

No comments:

Post a Comment