Tooltips and Popovers not working in Bootstrap 5
Question
I created a very small site, with Bootstrap 5.
I created 2 buttons at the bottom of the page using "tooltips" and "popovers" but they don't work, nothing is displayed.
Here is my site, it's at the bottom of the page:
And here is the HTML code:
<!doctype html>
<html lang="fr" class="h-100">
<head>
<link rel="manifest" href="/manifest.json">
<link rel="canonical" href="https://www.mathieulebert.fr/">
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body class="position-relative d-flex flex-column bg-dark text-white text-center" data-bs-spy="scroll" data-target="#navbar" data-bs-offset="85" tabindex="0">
<button type="button" class="btn btn-secondary m-5" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary m-5" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Copié">
Popover on bottom
</button>
<script src="bootstrap.bundle.min.js"></script>
<script src="clipboard.min.js"></script>
<script src="pwa.js"></script>
<script src="feed.js"></script>
<script>
var clipboard = new ClipboardJS('.btn-clipboard');
clipboard.on('success', function (e) {
console.log(e);
});
clipboard.on('error', function (e) {
console.log(e);
});
</script>
</body>
</html>
3 answers
solution1
6 ACCPTED 2021-04-07 17:10:06
In current implementation, the code to enable tooltips and popovers everywhere is not run by default. You have to run it yourself, mainly because Bootstrap tries to make less assumptions about your website and give you more control. This might change in the future.
You have an example in their docs on how to enable tooltips everywhere .
A shorter version:
[...document.querySelectorAll('[data-bs-toggle="tooltip"]')]
.forEach(el => new bootstrap.Tooltip(el))
And you have an example on the popovers doc page on how to enable popovers everywhere .
Shorter version:
[...document.querySelectorAll('[data-bs-toggle="popover"]')]
.forEach(el => new bootstrap.Popover(el))
You have to run this code after loading Bootstrap's JS, eg bootstrap.bundle(.min).js
Note: Unlike with other versions of Bootstrap, where reading documentation was somewhat optional, with v5 this doesn't hold true as much.
A lot of assumptions have been dropped, quite a few things have changed and you have been given more freedom.
To make sure this was the only reason they didn't work in your implementation, I ran the above code on your website and here's the result:
solution2
2 2021-08-13 19:30:26
Please arrange the links
first bootstrap.min.js
second bundle.min.js or popper.js
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
solution3
1 2021-12-15 20:58:45
Popovers need to be explicitly enabled in Bootstrap v5.1.
bootstrap.bundle.min.js includes popper.js which is a 3rd party library on which popover and tooltip components rely upon.
Paste the following in the end of the body -
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
Reference here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.