Now here in this tutorial, I’ll explain how to show hide tooltip with hint or help text when user mouse hover the link or click event by using CSS3 transition effects with example and live demo.
In my previous tutorials, I’d explained fadeIn and fadeOut effect using CSS3 transitions, jQuery fadeIn and fadeOut effect in asp.net, most popular fading effects, validate dropdownlist using javascript and other more cracking tutorials on Asp.net, JavaScript, jQuery, GridView here.
CSS3 transitions are the easiest way to animate HTML elements. CSS is used to control how web pages appear and shifts from one set of style sheets to another ordinarily occur abruptly.
1. Show Tooltip on Mouse Hover using CSS3 Transition – [.aspx]
Following is the complete HTML Markup code that I used for the demonstration:
<html>
<head>
<title>Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition</title>
<style type="text/css">
a.tooltip {
position: relative;
display: inline;
}
a.tooltip span {
position: absolute;
top: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
width: 250px;
height: auto;
color: #fff;
font-size: 12px;
line-height: 20px;
border-radius: 6px;
padding: 2px;
text-align: center;
background: #000;
border: 1px solid #808080;
visibility: hidden;
opacity: 0;
-webkit-transition: all 2s ease-out 0s;
-moz-transition: all 2s ease-out 0s;
-ms-transition: all 2s ease-out 0s;
-o-transition: all 2s ease-out 0s;
transition: all 2s ease-out 0s;
}
a:hover.tooltip span {
visibility: visible;
-webkit-opacity: 0.90;
-moz-opacity: 0.90;
opacity: 0.90;
}
a.tooltip span:before {
content: '';
position: absolute;
bottom: 100%;
left: 20%;
margin-left: -12px;
width: 0;
height: 0;
border-bottom: 12px solid #808080;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
}
a.tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 20%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
</style>
</head>
<body>
<div>Hover the Link: <a class="tooltip" href="#">AspnetO
<span>AspnetO - Quick Way To Learn Asp.net</span></a>
</div>
</body>
</html>
As you can see from the above example, I have given class=”tooltip” to anchor tag and written hint or help text under span tag that I want to display when user hover the link.
Sample Demo Result
Here’s the sample result screenshot which you can see is appeared tooltip when I hovered over the link:
2. Show Tool tip on Click Event using CSS3 Transition – [.aspx]
We need to use jQuery click event as shown below:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$("a.tooltip").click(function () {
$("a.tooltip > span").removeClass('hidden').addClass('visible');
setTimeout(function () {
$("a.tooltip > span").removeClass('visible').addClass('hidden');
}, 5000)
return false;
});
</script>
In above script, we need to bind the click event for the link with tooltip class which will fire on the click event of the link. After that we need to remove hidden class (from the “span” tag which contains the tooltip text) and add visible.
We also needs to add the default timeout using setTimeout function, which will remove the visible class and add hidden class which will hide the message on specific time. You can specify that time by replacing “5000” (means “5 milliseconds”) under the script.
Following is the complete HTML Markup code that I used for the demonstration:
<html>
<head>
<title>Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition</title>
<style type="text/css">
a.tooltip {
position: relative;
display: inline;
}
a.tooltip span {
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px;
margin-left: 15px;
z-index: 999;
width: 250px;
height: auto;
color: #fff;
font-size: 12px;
line-height: 20px;
border-radius: 6px;
padding: 2px;
text-align: center;
background: #000;
border: 1px solid #808080;
}
a.tooltip span:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0;
height: 0;
border-bottom: 8px solid transparent;
border-right: 8px solid #000000;
border-top: 8px solid transparent;
}
.hidden {
visibility: hidden;
opacity: 0;
-webkit-transition: all 2s ease-out 0s;
-moz-transition: all 2s ease-out 0s;
-ms-transition: all 2s ease-out 0s;
-o-transition: all 2s ease-out 0s;
transition: all 2s ease-out 0s;
}
.visible {
visibility: visible;
-webkit-opacity: 0.90;
-moz-opacity: 0.90;
opacity: 0.90;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div>
Click Here: <a class="tooltip" href="javascript:;">AspnetO
<span class="hidden">AspnetO - Quick Way To Learn Asp.net</span>
</a>
</div>
<script type="text/javascript">
$("a.tooltip").click(function () {
$("a.tooltip > span").removeClass('hidden').addClass('visible');
setTimeout(function () {
$("a.tooltip > span").removeClass('visible').addClass('hidden');
}, 5000)
return false;
});
</script>
</body>
</html>
As you can see from the above example, I also have given class=”tooltip” to anchor tag and written hint or help text under span tag that I want to display when user hover the link.
Sample Demo Result
For demonstration, I’ve clicked on the below link, tool tip appeared next to the link and was invisible within 5 milliseconds.
CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements
You can learn more about, how to give fadeIn and fadeOut like effects using css3 transitions here.
hi….your explaination was so nice …. but i wan’t see output & link doesnot work.
Hi Santosh,
Both sample output links are working, Which link are you talking about?
Thanks!