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:

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 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:

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

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>