Bootstrap 5 Tooltips Maker

Create Customzied Tooltips by the options given below and grab the code!

Tooltip Settings

Direction

Animation

Tooltip Title

Font Size

Text Color

Background Color

Preview & Code

Required JavaScript

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

FAQs

What does the direction setting do?

The direction setting determines where the tooltip will appear relative to the element (top, right, bottom, left).

How does the animation option work?

The animation option enables or disables the fade effect when the tooltip is shown or hidden.

Can I customize colors and text size?

Yes, you can set the text color, background color, and font size for the tooltip.

How do I attach the tooltip to a button or link?

The generated code can be added to any button or link element to attach the tooltip.