Question

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

我也发现了这个，但我无法让它工作，我怀疑它可能与AngularStrap有关，而不是bootstrap 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和关闭弹出框之间添加延迟，让您有时间将鼠标移动到弹出窗口
将事件绑定到popover元素本身，因此您可以跟踪它的mouseenter / mouseleave
保持内部元素的计数器，在mouseenter上递增并在mouseleave上递减。如果在离开延迟后计数器为0，则最后关闭工具提示

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

1 个答案: