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

Question

I have a dropdown that is triggered by clicking a glyphicon. The glyphicon has a ui-bootstrap tooltip that is triggered on mouse-enter/mouse-leave. The tooltip is also triggered to close when the glyphicon is clicked, and the dropdown is shown.

However, once the dropdown is open, the tooltip is shown again if the mouse-enter is triggered. I would like to prevent the mouse-enter triggering the tooltip when the dropdown is open.

The html for the glyphicon and the dropdown is:

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

I've create a plnkr to show exactly how it working: http://plnkr.co/edit/aeOuJasEHFUH505o2L8T

Any ideas how to do this?

Answer 1

Here is the working plnkr . I have used "is-open" attribute to detect whether dropdown is open or not. Based upon that, I have disabled/enabled the tooltip. I hope it helps.

I have added tooltip-enable="!isDropdownOpen" to the tooltip and is-open="isDropdownOpen" to the 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>