Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Create Link Tooltip Using CSS3 and jQuery ?

  • Last Updated : 09 Jul, 2020

Link tooltips are a great way to display extra information when an element or link is hovered on. There are several ways to do this.

Using CSS and jQuery: The mousenter and mouseleave events are used in jQuery to perform this operation.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




<!DOCTYPE html>
<html>
  
<head>
    <style>
        .tooltip {
            display: none;
            position: absolute !important;
            width: 200px;
            padding: 10px;
            margin: 0 0 3px 0;
            color: #fff;
            z-index: 1;
            font-size: 50px;
            text-decoration: none;
            text-align: center;
        }
  
        .tooltip:after {
            position: absolute !important;
            bottom: -14px;
            z-index: 1;
        }
  
        .tooltip:before {
            content: "";
            position: absolute !important;
            bottom: -14px;
            z-index: 100;
        }
    </style>
  
</head>
  
<body>
    <a href="#" class="link" title="Hello world!"
            class="tooltip_link left">
        Hover over me!
    </a>
  
    <script>
        $("a").mouseenter(function (e) {
            var $x = e.pageX - this.offsetLeft;
            var $tooltip_text = $(this).attr("title");
  
            $(this).append('<div class="tooltip">' 
                    + $tooltip_text + '</div>');
            $("a > div.tooltip.").fadeIn(300);
  
        });
  
        $("a").mouseleave(function () {
            $("a > div.tooltip.").fadeOut(300)
                    .delay(300)(function () {
                $(this).remove();
            });
        });
    </script>
</body>
  
</html>

Output:

After hovering mouse on “Hover over me!” , the output is



Hello world!

Using jQuery UI: The tooltip widget of jQuery UI helps to customize tooltips. The tooltip() method is used to add tooltip to any element.




<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- jQuery Links -->
    <link href=
        rel="stylesheet">
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <style type="text/css">
        .example {
            padding-left: 2rem !important;
            margin-top: 3rem;
            text-decoration: none;
            color: green;
  
        }
    </style>
</head>
  
<body>
    <a class="example" id="myTooltip" 
            href="#" title="Hello world!">
        Hover Over me!
    </a>
  
    <script>
        $(function () {
            $("#myTooltip").tooltip();
        });
    </script>
</body>
  
</html>

Output:

Using CSS only: Tooltips can be created using CSS and can be customized like any other element.




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
  
        .tooltip {
            position: relative;
            display: inline-block;
            margin-top: 3rem;
        }
  
        .tooltip .tooltiptext {
            width: 8rem;
            text-align: center;
            border-radius: 4px;
            background-color: green;
            color: #fff;
            padding-top: 9px;
            padding-bottom: 9px;
            position: absolute;
            z-index: 1;
            bottom: 165%;
            margin-left: -55px;
            left: 50%;
            transition: opacity 0.5s;
            visibility: hidden;
        }
  
        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: green 
                transparent transparent;
        }
  
        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
    </style>
</head>
  
<body>
    <div class="tooltip">Hover over me!
        <span class="tooltiptext">
            Hello world!
        </span>
    </div>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!