Angular创建一个可以单击的mouseenter popover

Question

我正在尝试创建一个可以单击的弹出窗口.AngularUI有一个很好的方式来指示延迟显示弹出窗口需要多长时间,但我需要一个类似的指令,允许我在弹出窗口内单击.我不能这样做,因为它会在mouseleave上自动消失.我可以使用像popover-close-delay这样的东西,但我也想确保一次只打开一个popover.理想情况下,将鼠标悬停在弹出窗口上的效果与悬停在其父元素上的效果相同.

我也发现了这个,但我无法让它工作,我怀疑它可能与AngularStrap有关,而不是bootstrap ui.使用angular-ui-bootstrap创建可Hoverable popover

这是我的代码

  <div style="width:50px" popover="I appeared on mouse enter!" 
  popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 1</div>
  <div style="width:50px" popover="I appeared on mouse enter!" 
  popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 2</div>
  <div style="width:50px" popover="I appeared on mouse enter!" 
  popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 3</div>
  <div style="width:50px" popover="I appeared on mouse enter!" 
  popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 4</div>

http://plnkr.co/edit/moHGYOdmIOE4IFDOICKs?p=preview

Answer 1

我认为你必须创建自己的。您可能可以通过这种方式执行您想要的操作（编辑tooltip.js）：

1. 在弹出窗口和关闭弹出窗口之间添加延迟mouseleave，以便您有时间将鼠标移动到弹出窗口
2. 将事件绑定到弹出框元素本身，这样您就可以跟踪它的 mouseenter/mouseleave
3. 在内部保留一个元素计数器，在 mouseenter 上递增，在 mouseleave 上递减。只有在离开延迟后计数器为 0 时才最终关闭工具提示