2

我试图拥有两种不同的元素，一种会在手机+平板电脑上显示，另一种会在台式机/等上显示。这两个不同的项目也有工具提示，我希望始终显示（所以不要使用悬停）

我遇到的问题是始终显示两个工具提示，即使响应元素（在本例中为 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

有可能做到吗？

4

1 回答 1

2

该问题是由于您以任何一种方式应用工具提示，无论按钮是否可见。要解决这个问题，你必须先给id你的buttons...

<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

于 2014-04-22T22:38:02.813 回答