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

Question

我有一个通过单击字形图标触发的下拉菜单。字形图标有一个在鼠标进入/鼠标离开时触发的 ui-bootstrap 工具提示。单击字形图标时也会触发工具提示关闭，并显示下拉菜单。

但是，一旦打开下拉菜单，如果触发了鼠标输入，工具提示就会再次显示。我想防止当下拉菜单打开时鼠标输入触发工具提示。

字形图标和下拉列表的 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

任何想法如何做到这一点？

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>