0

I'm looking to create a dropdown button with a popover. The menu works fine by itself but once the popover is added the menu sticks in the open position once clicked. How would I get dropdown and popover working together?

<div class="btn-group">
  <button class="btn btn-primary" data-bs-toggle="tooltip" rel="nofollow" title="Make a GET request">GET</button>
  <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" data-bs-toggle-second="tooltip" title="Specify a format for the GET request">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <a class="dropdown-item" data-bs-toggle="tooltip" title="A title">An item</a>
    </li>
  </ul>
</div>

<script type="text/javascript">
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"], [data-bs-toggle-second="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

I've also created it on JSFiddle

David Smith
  • 858
  • 7
  • 5

1 Answers1

0

This is the easiest workaround i could find. Divide the toggle and the tooltip functionalities, and it will work as intended.

  <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
    <span class="sr-only" data-bs-toggle="tooltip" title="Specify a format for the GET updated">Toggle Dropdowns</span>
  </button>

This is where i find the idea for the solution stackoverflow similar problem

Efraín Arreche
  • 26
  • 2