How to Create Link Tooltip Using CSS3 and jQuery ? Last Updated : 09 Jul, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. html <!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. html <!DOCTYPE html> <html lang="en"> <head> <!-- jQuery Links --> <link href= "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src= "https://code.jquery.com/jquery-1.10.2.js"> </script> <script src= "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </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. html <!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: Comment More infoAdvertise with us Next Article How to make a Slider tooltip extension using jQuery Mobile ? P prachimantri Follow Improve Article Tags : Web Technologies JQuery jQuery-Questions Similar Reads How to create a Tooltip popup using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Tooltip popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstylesheetâ href 1 min read How to create a bootstrap tooltip using jQuery ? Tooltip is like a balloon or also a small screen tip that displays text descriptions to any object in a webpage. A tooltip is displayed when the user hovers over an object using the cursor. It is a very useful part of a website and now can be found in almost all websites including some web applicati 4 min read How to make a Slider tooltip extension using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Slider tooltip extension using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstyle 1 min read How to add tooltip to an icon using Bootstrap ? In this article, we will see how to add tooltip element to an icon using Bootstrap. A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage. 2 min read How to Create a Tooltip with only HTML? A tooltip is a small box that appears when a user hovers over an item on a website or software application. This article discusses the importance of creating simple, accessible tooltips in web design without depending on JavaScript or CSS frameworks. We will use only HTML elements, specifically titl 1 min read How to create animated banner links using HTML and CSS? Links are one of the most important parts of any component that is used in website making. Almost every component had some form of links in it. A common example is a menu/nav-bar. All we see is some button like home, about, etc. but under the hood they all are links. Sometimes there comes a situatio 2 min read Like