Bootstrap 5 Tooltips disable() method is used to remove a tooltip's ability to be visible, manually. After using this method, the user won't be able to see the tooltip at all.
Syntax:
tooltip.disable()Return Value: This method gives the tooltip the ability to be hidden.
Let us understand more about this using some examples below:
Example 1: In this example, we will create Bootstrap 5 Tooltips and call disable on the tooltip which is positioned to appear on the top of the button. Calling disable method will vanquish the tooltip's ability to be seen.
<!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">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-success">GeeksforGeeks</h1>
<button id="tooltip-a" 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.disable()
}
return tooltip;
})
</script>
</body>
</html>
Output:
Example 2: In this example, we will create Bootstrap 5 Tooltips and call disable on all of the tooltips. Calling disable method will vanquish the tooltip's ability to be seen.
<!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">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="text-success">GeeksforGeeks</h1>
<button id="tooltip-a" 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)
tooltip.disable()
return tooltip;
})
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#disable
