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: