如何使用 ngx-bootstrap 甚至在禁用的按鈕上顯示工具提示

Question

在我的 Angular 6 應用程序中，我目前使用ngx-bootstrap的工具提示功能來顯示工具提示。

我需要在一些禁用的按鈕中顯示工具提示，但是它不起作用（它只適用於非禁用按鈕）。

有沒有辦法改變這種行為並始終顯示工具提示（無論項目是否被禁用）？

Answer 1

嘗試使用禁用類的示例我成功了。

<div class="card">
    <div class="card-header">
        <h3>Test</h3>
    </div>
    <div class="card-body">
        <button type="button" class="btn btn-default btn-secondary mb-2 disabled "
                tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
                placement="top">
            Tooltip
        </button>
    </div>
</div>

Answer 2

最好的解決方案是按跨度打包按鈕，如下例所示：

<span tooltip="ivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
    <button type="button" class="btn btn-default btn-secondary mb-2 disabled">
        Tooltip
    </button>
</span>

Answer 3

請閱讀這篇文章：https ://jakearchibald.com/2017/events-and-disabled-form-fields/

Chrome 和許多其他瀏覽器可能會停止在禁用的表單字段（包括按鈕）上發出所有鼠標事件。

我陷入了類似的情況，這個解決方法對我來說非常有效

triggers="pointerenter:pointerout"

根據按鈕內部使用的內容，可能需要添加指針事件：無； 在 CSS 中為他們。

確認在以下瀏覽器上工作：

Chrome 73+
FF 66+
IE 11+
Edge 42+

我希望它可以幫助你！