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

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

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>