Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Link Tooltip Using CSS3 and jQuery?
Link tooltips are an excellent way to display additional information when users hover over links. This article demonstrates three different approaches to creating tooltips using CSS3 and jQuery.
Approaches
We will explore the following methods
- Using jQuery mouseenter and mouseleave functions
- Using jQuery UI tooltip() function
- Using pure CSS for tooltips
Method 1: Using jQuery mouseenter and mouseleave Functions
This approach uses jQuery event handlers to show and hide tooltips dynamically. The mouseenter event fires when the mouse enters an element, while mouseleave fires when it exits.
Syntax
$(selector).mouseenter(function() {
// Show tooltip
});
$(selector).mouseleave(function() {
// Hide tooltip
});
Example
The following example creates a dynamic tooltip that appears when hovering over a link
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.link {
color: #007bff;
text-decoration: none;
font-size: 18px;
padding: 20px;
display: inline-block;
}
.tooltip {
position: absolute;
background-color: #333;
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
z-index: 1000;
display: none;
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
</style>
</head>
<body>
<div style="padding: 50px;">
<a href="#" class="link" data-tooltip="Welcome to TutorialsPoint!">
Hover over me!
</a>
</div>
<script>
$(".link").mouseenter(function(e) {
var tooltipText = $(this).data("tooltip");
var tooltip = $('<div class="tooltip">' + tooltipText + '</div>');
$('body').append(tooltip);
tooltip.css({
left: e.pageX - tooltip.outerWidth() / 2,
top: e.pageY - tooltip.outerHeight() - 10
}).fadeIn(200);
});
$(".link").mouseleave(function() {
$('.tooltip').fadeOut(200, function() {
$(this).remove();
});
});
</script>
</body>
</html>
A blue link appears. When hovering over it, a dark tooltip with white text "Welcome to TutorialsPoint!" appears above the link with a fade animation.
Method 2: Using jQuery UI tooltip() Function
jQuery UI provides a built-in tooltip widget that offers advanced customization options and smooth animations.
Syntax
$(selector).tooltip(); $(selector).tooltip(options);
Example
This example uses jQuery UI's tooltip widget for enhanced functionality
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
.ui-tooltip {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
}
.tooltip-link {
color: #007bff;
text-decoration: none;
font-size: 18px;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div style="padding: 50px;">
<a href="#" class="tooltip-link" title="Welcome to TutorialsPoint! Learn programming with us.">
Hover over me!
</a>
</div>
<script>
$(function() {
$(".tooltip-link").tooltip({
position: { my: "center bottom-20", at: "center top" },
show: { effect: "slideDown", duration: 300 },
hide: { effect: "slideUp", duration: 300 }
});
});
</script>
</body>
</html>
A blue link appears. When hovering, a green tooltip with white text slides down from above the link with smooth animation.
Method 3: Using Pure CSS
This approach creates tooltips using only CSS with the :hover pseudo-class, requiring no JavaScript.
Example
The following example demonstrates a CSS-only tooltip implementation
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 50px;
font-family: Arial, sans-serif;
}
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip-link {
color: #007bff;
text-decoration: none;
font-size: 18px;
padding: 10px;
}
.tooltip-text {
visibility: hidden;
width: 200px;
background-color: #333;
color: white;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}
.tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.tooltip-link:hover {
color: #0056b3;
}
</style>
</head>
<body>
<div class="tooltip-container">
<a href="#" class="tooltip-link">Hover over me!</a>
<div class="tooltip-text">
Welcome to TutorialsPoint! Your go-to source for learning.
</div>
</div>
</body>
</html>
A blue link appears. When hovering, a dark tooltip with white text fades in above the link with a smooth transition effect and a small arrow pointing down.
Browser Support
CSS tooltips are supported by all modern browsers
- Google Chrome 1.0+
- Edge 12.0+
- Firefox 1.5+
- Safari 4.0+
- Opera 9.0+
Conclusion
Link tooltips enhance user experience by providing additional context. Choose jQuery methods for dynamic content and advanced features, or use pure CSS for simple, lightweight tooltips. Each approach offers different benefits depending on your specific requirements.
1K+ Views
