Tooltips

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.39945

Tooltip – Bottom

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

Tooltip – Left

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

Tooltip – Right

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

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.39945

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.39945