UI Bootstrap - 如何在下拉菜单打开时防止工具提示的弹出

Question

我有一个下拉菜单，通过点击一个 glyphicon 触发。glyphicon 有一个 ui-bootstrap 工具提示，当鼠标进入或离开时触发。当点击 glyphicon 并显示下拉菜单时，工具提示也会触发关闭。

然而，一旦下拉菜单打开，如果再次触发鼠标进入，则工具提示将再次显示。我希望在下拉菜单打开时防止鼠标进入触发工具提示。

glyphicon 和下拉菜单的 html 如下:

<span class="" uib-dropdown-toggle>
    <span class="glyphicon glyphicon-sort category-sort-icon" uib-tooltip="Sort"
        tooltip-placement="left" tooltip-is-open="sortTooltipIsOpen"
        ng-click="sortTooltipIsOpen = !sortTooltipIsOpen">
    </span>
</span>

<ul uib-dropdown-menu class="dropdown-menu-right">
    <li ng-repeat="s in sortDesc" ng-click="sortBy(s)"><a href="#">{{s}}</a></li>
</ul>

我已经创建了一个plnkr演示，展示了它的工作原理：http://plnkr.co/edit/aeOuJasEHFUH505o2L8T 有什么想法如何做到这一点？

- Tom O'Brien

Answer 1

这是工作中的plnkr链接。我使用了“is-open”属性来检测下拉菜单是否已打开。基于此，我禁用/启用了工具提示。希望这能有所帮助。

我已将tooltip-enable="!isDropdownOpen"添加到工具提示中，并将is-open="isDropdownOpen"添加到uib-dropdown中。

<span class="" uib-dropdown is-open="isDropdownOpen">

        <span class="" uib-dropdown-toggle>

            <span class="glyphicon glyphicon-sort category-sort-icon" uib-tooltip="Sort"
              tooltip-placement="left" tooltip-is-open="sortTooltipIsOpen"
              ng-click="sortTooltipIsOpen = !sortTooltipIsOpen" tooltip-enable="!isDropdownOpen" >
            </span>

        </span>

        <ul uib-dropdown-menu class="dropdown-menu-right">
            <li ng-repeat="s in sortDesc" ng-click="sortBy(s)"><a href="#">{{s}}</a></li>
        </ul>

- van

---

我很高兴它解决了你的问题，祝你编码愉快 :) - van