我正在使用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() });
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: