Bootstrap 4 - Dropdown AND Tooltip on Button?

You can initialize the tooltip through any attribute, id or class to avoid crossover with dropdown.

<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

You could try making something like this where you have the button as data-toggle="tooltip" And add a dropdown

<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/

In such cases I find it easiest to simply put the label of the button within a span that has the tooltip itself

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

This way the button has the toggle action for the click event (including on the label) but the label has the tooltip event, and the two data-toggle attributes are on different elements so don't clash.