Bootstrap 4 - раскрывающийся список и всплывающая подсказка на кнопке?

Question

Есть ли способ указать, что кнопка действует и как выпадающий триггер, и как источник всплывающей подсказки?

Мне удалось заставить ее выполнять одно или другое, но не оба.Мой код ниже работает как выпадающий список, но если я переставлю data-toggle="dropdown" перед предыдущим для всплывающей подсказки, вместо этого будет отображаться всплывающая подсказка:

<button class="btn btn-sm dropdown-toggle"
            data-toggle="tooltip" data-toggle="dropdown"
            data-placement="bottom"
            title="Test Tooltip">

Answer 1

Вы можете попробовать сделать что-то вроде этого, где у вас есть кнопка как data-toggle="tooltip" И добавить выпадающий список

<ul class="nav navbar-nav">
 <li class="btn btn-sm dropdown" id="example" data-toggle="tooltip" data-placement="right" title="Test Tooltip" >  
   <a id="dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Im a drop down with a tooltip <span class="caret"></span></a>
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link or whatever</a></li>
     </ul>
 </li>
</ul>

$('#example').tooltip();

http://jsfiddle.net/h56xw8wq/67/

Answer 2

В таких случаях мне проще всего поместить метку кнопки в промежуток с самой подсказкой

<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
  <span data-toggle="tooltip" title="Test Tooltip">
    Button label
  <span>
</button>

Таким образом, кнопка имеет действие переключения для события click (включая метку), но метка имеет событие всплывающей подсказки, и два атрибута data-toggle находятся на разных элементах, поэтому не конфликтуйте.

Answer 3

Вы можете инициализировать всплывающую подсказку через любой атрибут, идентификатор или класс, чтобы избежать пересечения с выпадающим списком.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Tooltip on right">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

$('[data-toggle-second="tooltip"]').tooltip();

https://www.codeply.com/go/aFEQgHs1sC