logologo-dark

Tooltips

Examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes.

Examples

Hover over the button below to see tooltips.

Code Example
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">  Tooltip on top</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">  Tooltip on right</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">  Tooltip on bottom</button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">  Tooltip on left</button>

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper div or span, and override the pointer-events on the disabled element.

Code Example
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button></span>
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Softy
Header Style
White
Light
Dark
Theme
Header Option
Regular
Fixed
Primary Skin
Default
Blue
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?