如何实现Tooltip仅在满足条件且鼠标悬停时触发显示？

我看你现在的问题是Tooltip直接根据条件显示了，忽略了mouseenter触发的设置——这是因为你把tooltip-is-open直接绑定到了长度判断条件上，这个属性会强制Tooltip显示/隐藏，完全覆盖了trigger的自动触发逻辑。

咱们来一步步调整：

核心问题分析 #

tooltip-is-open="cv.jumpInReady.length>11" 这个设置会让Tooltip只要长度满足就一直显示，不管鼠标有没有进入元素。而你需要的是条件满足时才允许Tooltip被鼠标事件触发，而不是强制显示。

修改方案 #

把代码调整成这样：

<div class="event_field popover-wrapper" 
     popover-placement="bottom-left" 
     uib-popover-template="'searchexp.html'" 
     popover-is-open="cv.isskillSugOpen" 
     popover-enable="rowform.$visible && !cv.DisablePopUp" <!-- 去掉插值，直接绑定表达式更规范 -->
     uib-tooltip="{{cv.jumpInReady}}" 
     tooltip-placement="top" 
     tooltip-enable="cv.jumpInReady.length>11" <!-- 控制Tooltip是否可被触发 -->
     tooltip-trigger="'mouseenter mouseleave'" <!-- 指定触发事件：进入显示，离开隐藏 -->
     >

各属性的作用解释 #

• tooltip-enable="cv.jumpInReady.length>11"：这是关键——当这个条件不满足时，Tooltip完全禁用，任何鼠标事件都不会触发它；只有条件满足时，才允许后续的trigger事件生效。
• tooltip-trigger="'mouseenter mouseleave'"：明确指定Tooltip的触发逻辑：鼠标进入元素时显示，离开时隐藏。注意这里的单引号必须加，因为Angular需要把这个值解析成字符串，而不是变量。
• 移除tooltip-is-open：这个属性是用来手动控制Tooltip显示/隐藏的（比如按钮点击切换），如果绑定到固定条件，就会覆盖trigger的自动行为，所以这里要去掉它。

额外优化提示 #

• 把popover-enable="{{rowform.$visible && cv.DisablePopUp==false}}"改成popover-enable="rowform.$visible && !cv.DisablePopUp"，Angular UI Bootstrap的这类属性支持直接绑定表达式，不需要用{{}}插值，这样代码更清晰也更符合规范。
• 如果你希望Tooltip在获取焦点时也能显示，可以把trigger改成'mouseenter focus mouseleave blur'，覆盖更多场景。

这样调整后，Tooltip就会严格按照你的需求工作：只有当cv.jumpInReady.length>11满足，并且鼠标进入元素时才会显示，鼠标离开后自动隐藏。

内容的提问来源于stack exchange，提问作者Usman Iqbal