如何在 Angular JS 中为禁用的 <li> 项目添加工具提示答案

【问题标题】：How to add tooltip for an disabled <li> items in angular JS如何在 Angular JS 中为禁用的 <li> 项目添加工具提示
【发布时间】：2020-03-11 15:29:26
【问题描述】：

我有一个li列表如下，

<li class="dropdown-item"
    data-toggle="tooltip"
    uib-tooltip="tooltip goes here"
    data-placement="left"
    data-ng-repeat="result in items.results.contextValues.rows "

    data-ng-class="{'disabled': result[3] === 'disable' }"
    >
    {{result[1]}}
</li>

这是我禁用的条件，

'disabled': result[3] === 'disable'

li 元素被禁用时如何在悬停时添加工具提示？

【问题讨论】：

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

你可以试试下面的ng-attr-title="{{result[3] === 'disable' ? 'disabled' : undefined}}":-

<li class="dropdown-item"
    data-toggle="tooltip"
    uib-tooltip="tooltip goes here"
    data-placement="left"
    data-ng-repeat="result in items.results.contextValues.rows "
    ng-attr-title="{{result[3] === 'disable' ? 'disabled' : undefined}}"
    data-ng-class="{'disabled': result[3] === 'disable' }"
    >
    {{result[1]}}
</li>

我为您创建了一个有效的fiddle。请看一下。

【讨论】：

你能检查一下li元素是否有title属性吗？
根据您的代码，我可以看到的标题是“已禁用”
指针事件：无！重要；背景颜色：#bbb！重要；光标：不允许；
嗯，pointer-events: none 是这里的罪魁祸首。因为那个浏览器没有在那个元素上触发悬停事件。因此，作为一种解决方法，您应该包装 li 元素并在其上添加 title 属性。
你能帮我做吗。谢谢。

【解决方案2】：

不幸的是，浏览器不会在禁用元素上触发鼠标事件，因此工具提示永远不会触发。简单的解决方法是包装禁用的元素并在其上显示工具提示。

【讨论】：

AFAIK，html 中的li 元素没有禁用属性。