> For the complete documentation index, see [llms.txt](https://docs.trydrupal.com/radix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trydrupal.com/radix/components/tooltips.md).

# Tooltips

[**Bootstrap docs**](https://getbootstrap.com/docs/5.3/components/tooltips/)

### **Considerations**

* Tooltips rely on the third party library [Floating UI (previously PopperJS)](https://floating-ui.com/) for positioning. 
* Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.

### Usage

For using the Tooltip, you don't necessarily need a specific twig template, you just need to trigger the tooltip on any element that has `data-bs-toggle="tooltip` and and associated `data-bs-title="Default tooltip"` .

Taken from the Bootstrap Tooltip component page example, you can trigger the Tooltip on a link with a markup like below:

```html
<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>
```

and then trigger it with the following javascript init, note that this file already exists in `_bootstrap.js`, uncomment if not needed:

```javascript
import Tooltip from 'bootstrap/js/dist/tooltip';

const tooltipTriggerList = document.querySelectorAll(
 '[data-bs-toggle="tooltip"]',
);
const tooltipList = [...tooltipTriggerList].map(
 (tooltipTriggerEl) => new Tooltip(tooltipTriggerEl),
);
```