Home Asp.net Tooltip: Show Hide Hint Help Text Example in CSS3 Transition

Tooltip: Show Hide Hint Help Text Example in CSS3 Transition

130
2
Show Tooltip on Mouse Hover using CSS3 Transition
Show Tooltip on Mouse Hover using CSS3 Transition

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:

Show Tooltip on Mouse Hover using CSS3 Transition

Note: I’ve adjusted the CSS for the demonstrations. You are free to adjust height, width, transition effects or any type of modification from the above code.

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.

Show Tool tip on Click Event using CSS3 Transition
Show Tool tip on Click Event using CSS3 Transition

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.

Previous articleHow to bulk insert in SQL server from CSV File? [SQL Bulk Insert CSV]
Next articleImage Preview Before Upload Using jQuery or JavaScript in Asp.net
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

one × 5 =