Bootstrap Tooltip Generator
Configure a Bootstrap 5 tooltip’s text, placement, trigger and colours, then copy the HTML, the optional CSS and the script that initialises it.
Tooltip settings
Preview
A static preview of the tooltip’s position and colours. On your site Bootstrap shows it on hover or focus.
<button type="button" class="btn btn-primary"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="Helpful tooltip text">
Hover me
</button><script>
// Tooltips are opt-in in Bootstrap 5: initialise them once the page loads.
// Requires bootstrap.bundle.min.js (it includes Popper).
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>What is a Bootstrap tooltip?
A Bootstrap tooltip is a small text label that appears next to an element when a user hovers over or focuses it. Bootstrap 5 positions tooltips with the Popper library, and they are opt-in: you add data-bs-toggle="tooltip" to an element and initialise it with a few lines of JavaScript. Tooltips suit short hints, such as explaining what an icon button does.
How to use the tooltip generator
- 1
Enter the tooltip text and choose whether it may contain HTML.
- 2
Pick a placement (top, right, bottom or left) and a trigger, such as hover and focus, or click.
- 3
Choose a button or a text link, its Bootstrap style and its label.
- 4
Optionally set custom background and text colours. The tool then adds a custom class and the CSS for it.
- 5
Copy the HTML, any CSS and the initialisation script into your page, after bootstrap.bundle.min.js.
Frequently asked questions
Why is my Bootstrap tooltip not showing?
Bootstrap tooltips are opt-in for performance reasons, so Bootstrap does not initialise them for you. Load bootstrap.bundle.min.js, which includes Popper, and run the initialisation script from this tool after the page loads. Also check that the element has a data-bs-title value.
Can I add a tooltip to a disabled button?
Not directly, because disabled elements do not respond to hover or focus. Wrap the button in a span or div, put the tooltip attributes and tabindex="0" on the wrapper, and the tooltip will open when users hover over or focus the wrapper.
Which Bootstrap version does the code target?
The code follows the Bootstrap 5.3 documentation. It uses the data-bs-title attribute and, for custom colours, the --bs-tooltip-bg and --bs-tooltip-color CSS variables. Load the Bootstrap 5.3 CSS and bootstrap.bundle.min.js on the page.
Is it safe to allow HTML in a tooltip?
With data-bs-html="true", Bootstrap renders the tooltip text as HTML but first runs it through its built-in sanitiser, which strips tags and attributes that are not on its allow list. Only enable HTML when you need formatting, and never insert unescaped user input.
Related tools
Stop tweaking snippets. Build the whole site
This tool fixes one piece. Canvas Builder builds the entire page from a single prompt: sections, copy, styling, and responsive layout. You own the code.