Question

使用带有qtip2的Bootstrap css时，我有一个非常奇怪的错误：

我有一个按钮，我绑定了一个qtip弹出窗口：

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

我像这样绑定qtip（工作正常）

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

只要按钮获得css类disabled（只有类，而不是属性），qtip就会停止工作。

以下是jsfiddle

重要： 如果按钮没有类btn，即使拥有disabled类，qtip仍然有效。那么这个问题与Bootstrap btn类有什么关系？

Answer 1

在bootstrap.min.css中找到

.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;
}

并删除指针事件：无;

或者只是覆盖这样的bootstrap样式 jsfiddle

Bootstrap CSS与qtip2的奇怪冲突

1 个答案: