我试图拥有两种不同的元素,一种将显示在手机+平板电脑上,另一种将显示在台式机/等设备上。这两个不同的元素也有工具提示,我希望始终显示它们(因此不使用悬停)
我遇到的问题是,即使响应元素(div,或本例中的按钮)被隐藏,两个工具提示也始终显示。
HTML:
<div class="container">
<div class="row col-md-12">
<button type="button" class="btn btn-default tooltip-btn visible-xs visible-sm" data-toggle="tooltip" data-placement="bottom" title="Small Screen Tooltip">visible-xs, visible-sm</button>
<button type="button" class="btn btn-default tooltip-btn visible-md visible-lg" data-toggle="tooltip" data-placement="bottom" title="Large Screen Tooltip">visible-md, visible-lg</button>
</div>
</div>
JS:
var opts = {"container": "body", "trigger": "manual", "html": true};
$('.tooltip-btn').tooltip(opts).tooltip("show");
我有一个 JSBin 示例:http://jsbin.com/UFoRIYex/508/edit
可以做吗?
最佳答案
该问题是由于您以任何方式应用工具提示而引起的,无论按钮是否可见。要解决这个问题,您必须首先为您的按钮
提供一个id
...
<button id="small" type="button" class="btn btn-default tooltip-btn visible-xs visible-sm" data-toggle="tooltip" data-placement="bottom" title="Small Screen Tooltip">visible-xs, visible-sm</button>
<button id="medium" type="button" class="btn btn-default tooltip-btn visible-md visible-lg" data-toggle="tooltip" data-placement="bottom" title="Large Screen Tooltip">visible-md, visible-lg</button>
...然后检查它们在 js 中的可见性,如下所示:
if ($('#small').is(':visible'))
$('#small').tooltip(opts).tooltip("show");
if ($('#medium').is(':visible'))
$('#medium').tooltip(opts).tooltip("show");
我在这里更新了您的 PasteBin:http://jsbin.com/UFoRIYex/509/edit
关于css - 尝试将 bootstrap3 工具提示与响应式实用程序一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23230547/