Optimizing Tooltips with Custom Styles
While the provided BS4 solutions for tooltips are effective, they lack individuality as they change the style globally. Wouldn't it be more appealing to have a custom style for each tooltip, similar to alert boxes? It's puzzling why the BS team didn't include this feature by default.
Hello, data-container!
A simple workaround involves utilizing the container option offered by BS tooltips. This option allows you to attach the tooltip element to a specific container. By wrapping the tooltip in another element and specifying the data-container attribute, you can achieve this effect:
<span class="wrapper"><a href="#" data-toggle="tooltip" data-container=".wrapper" title="Some tooltip text!">Hover over me</a></span>
You can now style the tooltip individually within the wrapper element. For instance, if you desire a "danger" styled tooltip, your HTML would look like this:
<span class="tooltip-danger"><a href="#" data-toggle="tooltip" data-container=".tooltip-danger" title="Some tooltip text!">Hover over me</a></span>
Accompanied by the following stylesheet:
.tooltip-danger .tooltip-inner {
color: #721c24;
background-color: #f8d7da;
border: 1px solid #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-top .arrow:before {
border-top-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-right .arrow:before {
border-right-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-bottom .arrow:before {
border-bottom-color: #721c24;
}
.tooltip-danger .tooltip.bs-tooltip-left .arrow:before {
border-left-color: #721c24;
}
This customization yields a visually distinct tooltip:
https://i.sstatic.net/i2jYe.png
An alternative tooltip on the same page might appear as follows:
https://i.sstatic.net/wY5KY.png
Explore endless possibilities...
Creative Styling Options
If you're looking for inspiration, here are some tooltip styles inspired by BS4 alerts:
.tooltip-dark .tooltip-inner {
color: #1b1e21;
background-color: #d6d8d9;
border: 1px solid #1b1e21;
}
.tooltip-info .tooltip-inner {
color: #0c5460;
background-color: #d1ecf1;
border: 1px solid #0c5460;
}
.tooltip-light .tooltip-inner {
color: #818182;
background-color: #fefefe;
border: 1px solid #818182;
}
.tooltip-primary .tooltip-inner {
color: #004085;
background-color: #cce5ff;
border: 1px solid #004085;
}
.tooltip-secondary .tooltip-inner {
color: #383d41;
background-color: #e2e3e5;
border: 1px solid #383d41;
}
.tooltip-success .tooltip-inner {
color: #155724;
background-color: #d4edda;
border: 1px solid #155724;
}
.tooltip-warning .tooltip-inner {
color: #856404;
background-color: #fff3cd;
border: 1px solid #856404;
}
Hopefully these tips prove valuable. Warm regards,
George