## Overview

Things to know when using the tooltip plugin:

Tooltips for more bootstrao components Bootstrap Tooltips documentation

- Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for tooltips to work!
- Tooltips are opt-in for performance reasons, so you must initialize them yourself.
- Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
- Triggering tooltips on hidden elements will not work.
- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
- Tooltips can be triggered thanks to an element inside a shadow DOM.

The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the reduced motion section of our accessibility documentation.

#### Example: Enable tooltips everywhere

One way to initialize all tooltips on a page would be to select them by their `data-bs-toggle` attribute:

    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })

## Examples

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.

##### Custom Settings

###### Template Color Settings

- Click to Dyanmic Setting

- Primary Color
- Secondary Color
- Chart Color 1
- Chart Color 2
- Chart Color 3
- Chart Color 4
- Chart Color 5

###### Font Settings

- Poppins Google Font
- Open Sans Google Font
- Montserrat Google Font
- Plex Google Font

###### Contrast Layout

- Enable Dark Mode!
- Enable High Contrast
- Enable RTL Mode!