微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐