Tooltip example 3
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Tooltip | |
| Description | Tooltips in light mode, dark mode and in color | |
| Provider | Skin, BootstrapComponents | |
| Note | The BootstrapComponents extension cannot change the colors of a tooltip, so the tooltips in color are written in HTML. They work only on pages that also have a tooltip made with the extension. Dark mode needs the CSS marked "Bootstrap dark mode" on MediaWiki:Common.css, because the Chameleon skin leaves out Bootstrap's dark mode. | |
| Reference | getbootstrap.com - custom tooltips | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Light mode
- Code
Hover over {{#bootstrap_tooltip: this text |text=Tooltip text }} to see the tooltip.
- Result
Hover over this text to see the tooltip.
Dark mode
The code is the same as for light mode, see Color modes.
- Result
Hover over this text to see the tooltip.
Colors
- Code
Hover over <span class="bootstrap-tooltip" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-orange" title="Black text on orange">black on orange</span> and <span class="bootstrap-tooltip" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-orange-text" title="Orange text on black">orange on black</span>.
On MediaWiki:Common.css or MediaWiki:Chameleon.css:
.tooltip-orange {
--bs-tooltip-bg: var(--bs-orange);
--bs-tooltip-color: var(--bs-black);
}
.tooltip-orange-text {
--bs-tooltip-color: var(--bs-orange);
}
- Result
Hover over black on orange and orange on black.
