Search code examples
javascripttwitter-bootstrapbuttonbootstrap-confirmation

bootstrap multiple data-toggle on delete button?


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();
})

Solution

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