Bootstrap CSS strange conflict with qtip2

Question

I have a very strange bug when using Bootstrap css with qtip2:

I have a button, on which i bind a qtip popup:

<button type="button" class="btn btn-default" id="deleteButton">
    Delete
</button>

I bind the qtip like this (is working fine)

var $button = $("#deleteButton");
$button.qtip({
    show: {
        event: 'mouseenter',
        solo: true,
        effect: false,
        delay: 100
    },
    content: function (event, api) {
         return "Tooltip message";   
    }
});

As soon as the button gets the css class disabled (only the class, not the attribute), the qtip stops working.

Here is the jsfiddle

Important: If the button doesn't have the class btn, even having the disabled class, the qtip still works. So the issue has something to do with the Bootstrap btn class?

Answer 1

In bootstrap.min.css find

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}

and delete pointer-events: none;

or just overwrite the bootstrap style like this jsfiddle