bootstrap multiple data-toggle on delete button?

Question

I have a bootstrap delete button, to get popover on it I'm using bootstrap-confirmation.js. and now trying to use a tooltip on it but tooltip not working because of confirmation js. please anyone have a solution for this?

This is my button

 <button class="btn btn-outline-danger btn-sm mr-2" data-toggle="confirmation" data-placement="top" data-toggle="tooltip">
     <i class="fas fa-trash"></i>
 </button>

This is my javascript

$(function() {

  $('[data-toggle=confirmation]').confirmation({
       rootSelector: '[data-toggle=confirmation]',
       popout: true,
       btnOkClass: 'btn-success',
    });

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

Answer 1

I found a way to fix this, I wrapped my button icon with span and I gave tooltip for that span.

<button class="btn btn-outline-danger btn-sm mr-2" data-toggle="confirmation" data-placement="top">
    <span data-toggle="tooltip" title="Delete series">
         <i class="fas fa-trash"></i>
    </span>
</button>

Answer 2

You could also change the selector to something else:

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

And then just change it in the element data-tooltip="tooltip"