Tooltips

go.raybo.org/4AJR

Tooltips are a deceptively simple looking component that adds explanatory text to elements. They require a bit of setup.

Tooltip Data

  • button or a

    • title="Tooltip Text"
    • data-bs-toggle="tooltip"
    • data-bs-placement="{SID}"
    • SID: top right bottom left

Try it Docs

The basic tooltip's text is added in the title property, the rest of the configuration can be added by using a number of data classes.

The key data attributes are data-bs-toggle="tooltip and data-bs-placement with a side attribute.

Tooltips have to be manually activated with some JavaScript that initializes them. They can also be a bit finicky with positioning and

There are options for adding custom HTML templates, triggers, delays, offsets and lots more, so take a peek at the documentation for more info.