First: go to the official website to import relevant files: (click to enter and download files)
You can first check whether the JavaScript file of Bootstrap is imported correctly. If it is imported correctly, you can try to update the version of Bootstrap or manually call the initialization function of tooltips in the code.
Things to know when using the tooltip plugin
- Tooltips rely on the third-party library Popper for positioning. You have to include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js/bootstrap.bundle.js which includes Popper for tooltips to work;
- If you build our JavaScript from source, it requires util.js.
- Tooltips are optional for performance reasons, so you must initialize them yourself.
- Tooltips with title length zero never show
- Specify container: 'body' to avoid rendering issues in more complex components like input groups, button groups, etc.
- Hints that trigger hidden elements will not work.
- Tooltips for disabled or disabled elements must fire on the wrapper element.
- Tooltips will be centered when triggered from a hyperlink that spans multiple lines. Use white-space:nowrap;} on <a> to avoid this behavior.
- Tooltips must be hidden before their corresponding elements are removed from the DOM.
- Tooltips can be triggered due to an element in the shadow DOM.
By default, the component uses a built-in content sanitizer, which removes any HTML elements that are not explicitly allowed.
The animation effect of this component depends on the preferred-reduced-motion media query.
2、Example: Enable tooltips everywhere
Put this attribute in the js file and use
One way to initialize all tooltips on a page is to data-toggleselect them via their properties
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})