Tooltips & Popovers Component
Contextual popovers and interactive tooltips for displaying supplementary information.
Popovers Directions
Four direction options are available: top, right, bottom, and left aligned popovers.
Dismiss on Next Click / Focus Trigger
HTML Content & Disabled Popovers
Popovers with rich HTML formatting and disabled element wrappers.
Custom HTML Content Popover
Popover on Disabled Elements
Tooltips Directions
Hover over the buttons below to see top, right, bottom, and left tooltips.
HTML Content Tooltip
Custom Brand Styled Tooltips
Custom styled tooltips using Spark Admin design system color classes.
Reusable Code Snippets
Copy and paste these tooltip & popover code snippets directly into your workspace files.
Bootstrap Popovers
<button class="btn btn-forest-primary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover message">Popover Top</button>
<a class="btn btn-soft-forest" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible" data-bs-content="...">Dismissible</a>
Custom Brand Tooltips
<button class="btn btn-forest-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top tooltip">Tooltip Top</button>
<button class="btn btn-lime-primary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-lime" title="Custom Lime">Lime Tooltip</button>