How to use anchor Tag In HTML
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.org/" target="_blank">
w3wiki
</a>
</div>
</div>
</body>
</html>
Output:
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
Contact Us