---- Link -------- <p>I'm a big fan of <a data-bs-toggle='tooltip' data-bs-title='Default tooltip' data-bs-placement='top' href='https://www.youtube.com/watch?v=-MH-UmYkXiM&list=OLAK5uy_myVd1teOMmTogvwPHlCi2-sJC7CSKK3zU&index=1' target='_blank'>Lord Huron</a></p> ---- Text -------- <p><strong data-bs-toggle="tooltip" data-bs-title="Default tooltip" data-bs-placement="left">Lord Huron?</strong> — They are the bomb diggety.</p> ---- Icon -------- <p>Emm...what's a Lord Huron? <i class="fa-solid fa-circle-info" data-bs-toggle="tooltip" data-bs-title="Default tooltip" data-bs-placement="bottom"></i></p> ---- Button -------- <button type='button' class='btn btn-primary rounded-1' data-bs-toggle='tooltip' data-bs-title='Default tooltip' data-bs-placement='right'>Lord Huron</button>
To style the background color and pointer arrow for your tooltips, you will need to add the following custom class.
/* Set the tooltip container transparent --------------- */
.tooltip {
background-color: transparent !important;
}
/* Set the tooltip background color and text --------------- */
.tooltip-inner {
background-color: {custom color};
color: #fff;
}
/* Set the tooltip pointer color depending on tooltip direction --------------- */
.bs-tooltip-top .tooltip-arrow::before {
border-top-color: darkred; }
.bs-tooltip-bottom .tooltip-arrow::before {
border-bottom-color: darkred; }
.bs-tooltip-start .tooltip-arrow::before {
border-left-color: darkred; }
.bs-tooltip-end .tooltip-arrow::before {
border-right-color: darkred; }
/* Or ... to hide the pointer arrow --------------- */
.tooltip-arrow::before {
display: none;
}
Tooltips are opt-in, meaning they must be initialized on page load. Add the following code somewhere
just above the closing </body> tag.
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
This will reset the page. Are you sure?