# 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),
);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trydrupal.com/radix/components/tooltips.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.