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

发布时间：2020-12-17 09:27:30 所属栏目：安全来源：网络整理

导读：我正在使用Angular Bootstrap,并希望在桌面上使用“hover”触发我的工具提示,并在移动设备上点击,如果您点击工具提示外的其他操作,则无法悬停,但也可以将工具提示关闭.我将其设置为tooltip-trigger =“hover outsideClick”,因为“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:

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!