Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Link Tooltip Using CSS3 and jQuery?
In this article, we will look to approach to Creating Link Tooltip Using CSS3 and jQuery.
When an element or link hovers over, link tooltips are an excellent method to show more information. There are various methods for doing this. When a link hovers over, tooltips are utilized to offer additional information.
Multiple Approaches
We have provided the solution in different approaches.
- By Using mouseenter and mouseleave functions of jquery.
- By Using tooltip() function.
- Using only CSS to create tooptips
Approach-1:By Using mouseenter and mouseleave functions of jquery
jQuery uses the mouseenter and mouseleave functions to carry out this action. −
The mouseenter event is fired at an Element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.The mouseleave event is fired at an Element when the cursor of a pointing device (usually a mouse) is moved out of it.
Syntax
In HTML, we use the following syntax of the mouseenter and mouseleave in the jquery −
addEventListener('mouseleave', (event) => {});
addEventListener('mouseenter', (event) => {});
Example
In the following section, we will design the code using mouserenter and the mouseleave function of jquery. A link named “Hover Over me! “ is created using the <a> tag and here when the user will hoover over this link a given text will appear to the user.
<!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="Welcome to tutorials points" 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>
After hovering mouse on “Hover over me!”, the output is
Welcome to tutorials points
Approach-2:By Using tooltip() function
Using jQuery UI − The tooltip widget of jQuery UI helps to customize tooltips. The tooltip() method is used to add tooltip to any element.
Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
jQueryUI provides tooltip() method to add tooltip to any element on which you want to display tooltip. This gives a fade animation by default to show and hide the tooltip, compared to just toggling the visibility.
Syntax
$(selector, context).tooltip (options) Method
$(selector, context).tooltip ("action", [params]) Method
Example
In the below code, we have used the tooltip() wedge to customize the created tooltip in the above example, here we have used the attribute type of the style tag of HTML and under it, we have added the properties as we want the tooltip should appear or is required by the user.
<!DOCTYPE html>
<html lang="en">
<head>
<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">
.hi {
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<a class="hi" id="myTooltip"href="#" title="Welcome to tutorials points">
Hover Over me!
</a>
<script>
$(function () {
$("#myTooltip").tooltip();
});
</script>
</body>
</html>
Approach-3: Using only CSS to create tooptips:
In this approach, we have only used the CSS to create tooltip as per the requirement. Manly using the hover property of the CSS which is responsible when the user hovers the mouse and it becomes the tooltips.
The − hover selector is used to selecting elements when you mouse over them.
Example
In this program, we are only using the CSS properties to create a tooltip as per the requirement. Here, when the user will hover over the link it will become tooltips and a given message will appear to the user.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.t_t {
position: relative;
display: inline-block;
margin-top: 3rem;
}
.t_t .tooltiptext {
width: 8rem;
text-align: center;
border-radius: 4px;
background-color: blue;
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;
}
.t_t .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: green
transparent transparent;
}
.t_t:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="t_t">Hover over me!
<span class="tooltiptext">
Welcome to tutorials Point
</span>
</div>
</body>
</html>
Supported Browsers − The browsers supported by pointer-events Property are listed below −
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 11.0
- Firefox 1.5
- Opera 9.0
- Safari 4.0
This article focused on How to Create Link Tooltip Using CSS3 and jQuery by using three different approaches.
796 Views
