Bootstrap 5 Tooltips show() Method

Bootstrap 5 Tooltip is a UI element that shows some extra information when the user hovers over or focuses on a tooltip-enabled element. The Tooltip show() method is used to show an element's tooltip. The Tooltip having the zero title length will not be visible.

Syntax:

const tooltip = new bootstrap.Tooltip(document.getElementById('tooltip-id'));
tooltip.show();

Parameters: This method does not accept any parameter.

Return Value: This method returns to the caller before the tooltip has been revealed to the front end.

Example 1: In this example, we used the show() method to reveal the tooltip of an element.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
                    initial-scale=1.0">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" />
</head>

<body>
    <div class="container text-center">
        <div class="mt-5">
            <h3 class="text-success">
                GeeksforGeeks
            </h3>
            <h4>Bootstrap 5 Tooltips show() Method</h4>
        </div>

        <a id="tt" class="btn d-block mt-5" href="#" 
           data-bs-toggle="tooltip" 
           data-bs-title="Welcome to GeeksforGeeks">
            Hover or Click Button for Tooltip
        </a>

        <button class="btn btn-danger mt-3" onclick="showTooltip()">
            Show Tooltip
        </button>

        <script>
            const mytt = document.getElementById('tt');
            const tooltip = new bootstrap.Tooltip(mytt);
            function showTooltip() {
                tooltip.show();
            }
        </script>
    </div>
</body>

</html>

Output:

Example 2: In this example, we used the tooltip's show() method along with the hide() method to show/hide the tooltip.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
    </script>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" />
</head>

<body>
    <div class="container text-center">
        <div class="mt-5">
            <h3 class="text-success">
                  GeeksforGeeks
              </h3>
            <h4>Bootstrap 5 Tooltips show() Method</h4>
        </div>

        <a id="tt" 
           class="btn d-inline-block mt-5"
           href="#" 
           data-bs-toggle="tooltip" 
           data-bs-title="Welcome to GeeksforGeeks">
            Hover or Click Button for Tooltip
        </a><br>
        <button class="btn btn-danger mt-3" 
                onclick="showTooltip()">
            Show Tooltip
        </button>

        <button class="btn btn-success mt-3" 
                onclick="showTooltipAndHideAfter3Seconds()">
            Show Tooltip And Hide After 3 Seconds
        </button>

        <script>
            const mytt = document.getElementById('tt');
            const tooltip = new bootstrap.Tooltip(mytt);
            function showTooltip() {
                tooltip.show();
            }
            function showTooltipAndHideAfter3Seconds() {
                tooltip.show();
                setTimeout(() => {
                    tooltip.hide();
                }, 3000);
            }
        </script>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#show

Bootstrap 5 Tooltips show() Method

Explore