Bootstrap 5 Tooltips toggle() Method

Last Updated : 25 Jul, 2024

Bootstrap 5 Tooltips toggle() method is used to toggle a tooltip's visibility manually. Calling it an odd number of times on a tooltip makes it visible, and calling it an even number of times makes it hidden.

Syntax:

tooltip.toggle()

Return Value:

The user receives a direct response from this method before the tooltip is ever displayed or hidden.

Example 1:

In this example, we will create Bootstrap 5 Tooltips and call toggle on the tooltip which is positioned to appear on the top of the button.

HTML

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

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>

<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    
    <button type="button" 
        class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top"
        title="Tooltip on top">
        Tooltip on top
    </button>

    <button type="button" 
        class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="right"
        title="Tooltip on right">
        Tooltip on right
    </button>

    <script>
        const tooltipTriggerList = [].slice.call(
            document.querySelectorAll('[data-bs-toggle="tooltip"]')
        )

        const tooltipList = tooltipTriggerList
            .map(function (tooltipTriggerEl) {
            
            const tooltip = new bootstrap.Tooltip(tooltipTriggerEl)
            if (tooltipTriggerEl.innerText?.includes('top')) {
                tooltip.toggle()
            }
            return tooltip;
        })
    </script>
</body>

</html>

Output:

Example 2:

In this example, we will create Bootstrap 5 Tooltips and call toggle 2 times on the tooltip which is positioned to appear on the top of the button. Calling toggle 2 times nullifies the toggle method's effects, so the user would see no difference at all on both tooltips.

HTML

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

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>

<body>
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    
    <button type="button" 
        class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top"
        title="Tooltip on top">
        Tooltip on top
    </button>

    <button type="button" 
        class="btn btn-secondary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="right"
        title="Tooltip on right">
        Tooltip on right
    </button>

    <script>
        const tooltipTriggerList = [].slice.call(
            document.querySelectorAll('[data-bs-toggle="tooltip"]')
        )
        const tooltipList = tooltipTriggerList
        .map(function (tooltipTriggerEl) {
            const tooltip = new bootstrap.Tooltip(tooltipTriggerEl)
            if (tooltipTriggerEl.innerText?.includes('top')) {
                tooltip.toggle()
                tooltip.toggle()
            }
            return tooltip;
        })
    </script>
</body>

</html>