How to Add a Link in a HTML Tooltip ?
Adding the link in the HTML tooltip involves embedding a hyperlink within the tooltip element, mainly used for user interaction such as hovering over a specific area.
Below are the approaches to add a link in a HTML tooltip:
Table of Content
- Using anchor Tag
- Add a link using JavaScript
Using anchor Tag
In this approach, we are using the anchor (<a>) tag within an HTML tooltip to create a hyperlink. The tooltip appears when the user hovers over the text “Hover to Visit,” showing a link to visit w3wiki in a new tab.
Example: Illustration of adding a link in an HTML Tooltip using an anchor Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Using anchor Tag</title>
<style>
h1 {
color: green;
text-align: center;
}
body {
text-align: center;
margin-top: 50px;
}
.tooltip-outer {
position: relative;
display: inline-block;
border-bottom: 2px solid black;
margin-top: 40px;
}
.tooltip-inner {
border: 2px solid black;
}
.tooltip-outer .tooltip-inner {
visibility: hidden;
width: 160px;
padding: 10px;
background-color: #4caf50;
color: #faf6f6;
text-align: center;
border-radius: 10px;
font-weight: 900;
font-size: 17px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
opacity: 0;
transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.tooltip-outer:hover .tooltip-inner {
visibility: visible;
opacity: 1;
transition: opacity 0.3s, visibility 0s linear 0s;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Using anchor Tag</h3>
<div class="tooltip-outer">
Hover to Visit
<div class="tooltip-inner">
Visit
<a href="https://www.w3wiki.net/" target="_blank">
w3wiki
</a>
</div>
</div>
</body>
</html>
Output:
Add a link using JavaScript
In this approach, we are using JavaScript . The user can input a link in the provided text field, and upon hovering over “Hover over me,” a tooltip appears, inviting them to visit the entered link in a new tab.
Example: Illustration of adding a link in a HTML tooltip using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Using JavaScript</title>
<style>
h1 {
color: green;
text-align: center;
}
body {
text-align: center;
margin-top: 50px;
}
.tooltipouter {
position: relative;
display: inline-block;
border-bottom: 2px solid black;
margin-top: 40px;
}
.tooltipinner {
border: 2px solid black;
}
.tooltipouter .tooltiptextinner {
visibility: hidden;
width: auto;
padding: 10px;
background-color: #4caf50;
color: #faf6f6;
text-align: center;
border-radius: 10px;
font-weight: 900;
font-size: 17px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
opacity: 0;
transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.tooltipouter:hover .tooltiptextinner {
visibility: visible;
opacity: 1;
transition: opacity 0.3s, visibility 0s linear 0s;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Using JavaScript</h3>
<label for="linkInput">Enter link:</label>
<input type="text" id="linkInput"
placeholder="https://example.com">
<br /><br /><br /><br />
<div class="tooltipouter">
Hover over me
<div class="tooltiptextinner" id="dynamicTooltip">
</div>
</div>
<script>
document.getElementById('linkInput')
.addEventListener('input', function () {
var uInput = this.value.trim();
var tContent = document.getElementById('dynamicTooltip');
if (uInput !== '') {
tContent.innerHTML = 'Visit <a href="' + uInput
+ '" target="_blank">Link</a>';
} else {
tContent.innerHTML = '';
}
});
</script>
</body>
</html>
Output: