javascripthtmltwitter-bootstraptooltip

Bootstrap 5 - Dropdown AND Tooltip on Button?


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:

Other: I tried:

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"