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

Question

我有一个通过单击字形图标触发的下拉菜单。字形图标有一个 ui-bootstrap 工具提示，在 mouse-enter/mouse-leave 上触发。单击字形图标时，工具提示也会被触发关闭，并显示下拉菜单。

但是，打开下拉菜单后，如果触发鼠标输入，工具提示将再次显示。我想防止鼠标输入在下拉菜单打开时触发工具提示。

字形和下拉列表的 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" 属性来检测下拉列表是否打开。基于此，我有 disabled/enabled 工具提示。希望对你有帮助。

我已将 tooltip-enable="!isDropdownOpen" 添加到工具提示，并将 is-open="isDropdownOpen" 添加到uib 下拉列表。

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

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

UI Bootstrap - how to prevent tooltip opening when dropdown is open

javascript

angularjs

angular-ui-bootstrap