如何使用 ngx-bootstrap 在禁用按钮上显示工具提示答案

【问题标题】：How to show the Tooltip even on disabled buttons with ngx-bootstrap如何使用 ngx-bootstrap 在禁用按钮上显示工具提示
【发布时间】：2020-08-01 17:26:41
【问题描述】：

在我的 Angular 6 应用程序中，我目前使用 Tooltip feature from ngx-bootstrap 来显示工具提示。

我需要在一些禁用按钮中显示工具提示，但是它不起作用（它只适用于非禁用按钮）。

有没有办法改变这种行为并始终显示工具提示（无论该项目是否被禁用）？

【问题讨论】：

检查禁用按钮是否有指针事件：无。如果没有其他选项，我会将禁用的按钮包装在 div 中，并且必须在其上而不是按钮上显示工具提示。
@Francesco Borzì：你找到解决方案了吗？你有它的演示吗？
@HDJEMAI 我已经有一段时间没有对此问题进行调查了，但是通常我会在自己找到解决方案时发布解决方案，所以可能不会:(

标签： javascript angular typescript tooltip ngx-bootstrap

【解决方案1】：

请阅读这篇文章：https://jakearchibald.com/2017/events-and-disabled-form-fields/

Chrome 和许多其他浏览器可能会停止在禁用的表单字段（包括按钮）上发出所有鼠标事件。

我陷入了类似的情况，这个解决方法对我来说效果很好

triggers="pointerenter:pointerout"

根据按钮内部使用的内容，可能需要添加指针事件：无；在 CSS 中为他们服务。

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

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

希望对你有帮助！

【讨论】：

如果它适用于任何人，或者您认为这可能是答案，那么我会要求您将其标记为已接受的答案，这样它也可以帮助其他人。谢谢！

【解决方案2】：

尝试使用禁用类的示例我成功了。

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

【讨论】：

你能添加一个演示或stackblitz演示，以表明它是这样工作的吗？如果您需要添加任何课程，您可以添加评论来解释它们吗？

【解决方案3】：

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

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

【讨论】：