Question

在Angular 6应用中，我目前正在使用Tooltip feature from 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"

根据按钮内使用的内容，可能需要添加指针事件：none;在CSS中。

已确认可以在以下浏览器上运行：

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

希望对您有帮助！

如何使用ngx-bootstrap甚至在禁用的按钮上也显示工具提示

3 个答案: