To determine which direction the tooltip appears, use the data-bs-placement attribute and with values: auto|top|right|bottom|left. Auto can be used if you need the tooltip to adjust dynamically depending on the viewport. If the tooltip does not have enough room for the placement, it will do an auto placement of the tooltip. More documentation can be found on Bootstrap’s site.

Tooltip – Top

See the Pen Components – Tooltip: Top by Working Solutions (@wsol) on CodePen.

Tooltip – Bottom

See the Pen Components – Tooltip: Bottom by Working Solutions (@wsol) on CodePen.

Tooltip – Left

See the Pen Components – Tooltip: Left by Working Solutions (@wsol) on CodePen.

Tooltip – Right

See the Pen Components – Tooltip: Right by Working Solutions (@wsol) on CodePen.

Tooltip – With HTML

If you need html in the tooltip, add data-bs-html=“true” to the button or link.

See the Pen Components – Tooltip: HTML by Working Solutions (@wsol) on CodePen.

Tooltip – White Background

By adding data-bs-custom-class=”tooltip-white text-start”, this will make the background white and align text to the left.

See the Pen Components – Tooltip: White Background by Working Solutions (@wsol) on CodePen.