Things to know when using the tooltip plugin:
bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper.js in order for tooltips to work!container: 'body'
to avoid rendering problems in more complex components (like our input groups, button groups, etc)..disabled
or disabled
elements must be triggered on a wrapper element.white-space: nowrap;
on your <a>
s to avoid this behavior.prefers-reduced-motion
media query. See the reduced motion section of our accessibility documentation.
One way to initialize all tooltips on a page would be to select them by their data-toggle
attribute:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Hover over the links below to see tooltips:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.