angularjs – 我不能在角度引导工具提示上同时使用“hover”和“outsideClick”触发器

前端之家收集整理的这篇文章主要介绍了angularjs – 我不能在角度引导工具提示上同时使用“hover”和“outsideClick”触发器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用Angular Bootstrap,并希望在桌面上使用“hover”触发我的工具提示,并在移动设备上点击,如果您点击工具提示外的其他操作,则无法悬停,但也可以将工具提示关闭.我将其设置为tooltip-trigger =“hover outsideClick”,因为“outsideClick”现在是支持的触发器( https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs),但这完全打破了工具提示,即使悬停也不起作用.
<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>

有没有办法使这些工作在一起?

如果我只是使用tooltip-trigger =“hover点击”它是体面的,但在手机上,我只能通过点击该项目再次关闭工具提示,而不是单击页面上的其他地方关闭它.

如果有机会使用本机引导库?由于它默认支持您要查找的内容.

我已经创建了一个jsfiddle演示(请在您的移动设备上查看,看看齿轮按预期工作)

HTML:

<div class="row">
  <div class="col-md-12">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
  </div>
</div>

JS:

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
});

您可以阅读here,作为附注,您必须手动启用工具提示

For performance reasons,the Tooltip and Popover data-apis are opt-in,meaning you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

原文链接:/angularjs/140630.html

猜你在找的Angularjs相关文章