angularjs - Angular 创建一个可以单击的 mouseenter 弹出框

Question

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

我也发现了这个，但我无法让它工作，我怀疑它可能与 AngularStrap 而不是引导 ui 有关。 Create Hoverable popover using angular-ui-bootstrap

这是我的代码

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

在 mouseleave 之间添加延迟并关闭弹出框，让您有时间将鼠标移动到弹出框

也将事件绑定(bind)到 popover 元素本身，因此您可以跟踪它的 mouseenter/mouseleave

在内部保留一个元素计数器，在 mouseenter 时递增，在 mouseleave 时递减。只有在离开延迟后计数器为 0 时才最终关闭工具提示