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
Getting Tooltips for mobile browsers in HTML
Mobile browsers don't display tooltips on hover since there's no mouse cursor. This tutorial shows how to create touch-friendly tooltips using jQuery that appear on tap.
The Problem with Mobile Tooltips
The HTML title attribute creates tooltips on desktop browsers when you hover over an element. However, mobile devices don't have hover states, so these tooltips are inaccessible to mobile users.
HTML Structure
Start with a basic HTML element that has a title attribute:
<p> The <span class="demo" title="this is underscore">underlined</span> character. </p>
jQuery Implementation
This jQuery code creates a tap-to-toggle tooltip system for mobile devices:
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$title.remove();
}
});
CSS Styling
The CSS positions and styles the tooltip to appear below the trigger element:
.demo {
border-bottom: 2px dotted;
position: relative;
cursor: pointer;
}
.demo .title {
position: absolute;
top: 25px;
left: 0;
background: #333;
color: white;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
z-index: 1000;
}
.demo .title::before {
content: '';
position: absolute;
top: -6px;
left: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333;
}
Complete Working Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.demo {
border-bottom: 2px dotted blue;
position: relative;
cursor: pointer;
}
.demo .title {
position: absolute;
top: 25px;
left: 0;
background: #333;
color: white;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
z-index: 1000;
}
</style>
</head>
<body>
<p>Tap the <span class="demo" title="This tooltip works on mobile!">underlined text</span> to see the tooltip.</p>
<script>
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$title.remove();
}
});
</script>
</body>
</html>
How It Works
The script checks if a tooltip (with class "title") already exists when the element is clicked. If not, it creates one using the title attribute text. If a tooltip exists, it removes it, creating a toggle effect.
Browser Compatibility
This solution works across all modern mobile browsers including iOS Safari, Chrome Mobile, and Firefox Mobile. It also maintains desktop functionality.
Conclusion
This jQuery solution provides accessible tooltips for mobile users by converting hover-based tooltips into tap-to-toggle interactions. The approach ensures consistent user experience across both desktop and mobile devices.
1K+ Views
