Bootstrap 5 - Dropdown AND Tooltip on Button?

Issue

Trying to add a tooltip to a btn (or any other tag) that already uses data-bs-toggle - the best result I can get is with the following:

function xmdEnableTooltips() {
let tooltipTriggerList = [].slice.call ( document.querySelectorAll ( '[data-bs-toggle-second="tooltip"]' ) )
let tooltipList = tooltipTriggerList.map ( function ( tooltipTriggerEl ) {
    return new bootstrap.Tooltip ( tooltipTriggerEl )
} ) }


    <div class="dropdown">
    <button id="sandbox-tooltip"
        class="btn btn-primary dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown"
        data-bs-toggle-second="tooltip"
        data-bs-placement="right"
        title="tooltip info ...">Tooltip Button
    </button> 

Results:

• on hover, tooltip displays
• on first click, nothing happens
• on second click, dropdown items display
• on click away from btn, tooltip disappears, but dropdown items do not

Other: I tried:

• wrapping the btn in a div and adding the tooltip code to that
• adding a span inside the btn with the tooltip code neither worked.

Does anyone have any ideas? Thx

Solution

FWIW...

1. as @Supportic noted, adding a popover to any button (or other tag) that already uses a bs-data-toggle is a non-starter. But why would anyone want a button to trigger a popover...?

2. However, the following works fine for hovering over text (or other tags) - popover shows and hides correctly.

   data-bs-trigger="hover"

Answered By - IMTanuki