Bootstrap 5 Tooltips update() Method
Last Updated :
14 Dec, 2022
Bootstrap 5 Tooltip is used to show some extra information to the user when the user hovers over the element or when the element with the tooltip is in focus. The update() method is used to update a tooltip instance after we have done setting its configuration and position etc i.e it is used to refresh the tooltip.
Syntax:
tooltip.update();
Return Value: No value is returned by the update() Method.
Example 1: In the below example we update the direction of the tooltip to “top”.
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">
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container mb-3">
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>
Bootstrap5 Tooltip update() Method
</strong>
</div>
<button type="button" id="gfg" class="btn btn-success"
data-bs-toggle="tooltip"
data-bs-placement="right"
data-bs-title="A computer science portal for geeks">
GeeksforGeeks
</button>
<br>
<button class="btn btn-primary mt-4" onclick="updateTooltip()">
Update Tooltip
</button>
</div>
<script>
// Enabling all the tooltips on the page.
const tooltipElements =
document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltips =
[...tooltipElements].map(el => new bootstrap.Tooltip(el));
function updateTooltip()
{
let tooltip = bootstrap.Tooltip.getInstance("#gfg");
tooltip._config.placement = 'top';
tooltip.update();
}
</script>
</body>
</html>
|
Output:
Example 2: In this example, we update the title of the tooltip and then call its update() method.
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">
<title>GeeksforGeeks - Bootstrap 5</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container mb-3">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap5 Tooltip update() Method</strong>
</div>
<button
type="button"
id="gfg"
class="btn btn-success mt-5"
data-bs-toggle="tooltip"
data-bs-placement="right"
data-bs-title="A computer science portal for geeks">
GeeksforGeeks
</button>
<br>
<button class="btn btn-primary mt-4"
onclick="updateTooltip()">
Update Tooltip's Title
</button>
</div>
<script>
// Enabling all the tooltips on the page.
const tooltipElements =
document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltips =
[...tooltipElements].map(el => new bootstrap.Tooltip(el));
function updateTooltip()
{
let tooltip = bootstrap.Tooltip.getInstance("#gfg");
tooltip._config.title = 'This is the new Title';
tooltip.update();
}
</script>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#update
Share your thoughts in the comments
Please Login to comment...