How to Create Link Tooltip Using CSS3 and jQuery ?
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.
<!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:
Please Login to comment...