Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.

Bootstrap docs

Considerations

• Tooltips rely on the third party library Floating UI (previously PopperJS) 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:

<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:

import { Tooltip } from "./_bootstrap";

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