How to Add a Link in a HTML Tooltip ?
Last Updated :
14 Mar, 2024
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:
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 GeeksforGeeks in a new tab.
Example: Illustration of adding a link in an HTML Tooltip using an anchor Tag
HTML
<!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>GeeksforGeeks</h1>
<h3>Using anchor Tag</h3>
<div class="tooltip-outer">
Hover to Visit
<div class="tooltip-inner">
Visit
<a href="https://www.geeksforgeeks.org/" target="_blank">
GeeksforGeeks
</a>
</div>
</div>
</body>
</html>
Output:
OutputAdd 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
HTML
<!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>GeeksforGeeks</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:
Output
Similar Reads
How to Create a Download Link in HTML? A download link allows users to download a specific file when they click on it. The download attribute in HTML is used to create a download link. Using the anchor tag we can create a download link in the HTML.Using the <a> Anchor TagTo create a download link in HTML, use the <a> tag with
1 min read
How to Create a Tooltip with only HTML? A tooltip is a small box that appears when a user hovers over an item on a website or software application. This article discusses the importance of creating simple, accessible tooltips in web design without depending on JavaScript or CSS frameworks. We will use only HTML elements, specifically titl
1 min read
How to Add Link to HTML Button? In HTML, links connect webpages using the <a> tag, with the href attribute specifying the destination URL. The simplest way to do this is to add a link to a button by wrapping it inside <a> tag.HTML<a href="https://www.geeksforgeeks.org/html/html-tutorial/"> <button>Click me
3 min read
How to Add Link to HTML Button? In HTML, links connect webpages using the <a> tag, with the href attribute specifying the destination URL. The simplest way to do this is to add a link to a button by wrapping it inside <a> tag.HTML<a href="https://www.geeksforgeeks.org/html/html-tutorial/"> <button>Click me
3 min read
How to Add Tooltip Line Breaks in ChartJS? Chart.js tooltips are used to provide additional information about data points when a user hovers over them. By default, tooltips display information in a single line, but you can customize them to include line breaks for better readability or to present more complex data. This customization can be
3 min read
How to Convert a Div into a Link in HTML ? To transform a <div> into a link, use the we can use anchor tag by wrapping the <div> with it. Set the href attribute of the anchor tag to the desired URL or target location. In this example we will see multiple approaches to do so:Table of Content Using the TagUsing JavaScript event han
2 min read