尝试使用具有响应实用程序的bootstrap3工具提示

时间:2014-04-22 21:27:42

标签: css twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-tooltip

我正在尝试使用两种不同的元素,一种可以在手机+平板电脑上显示,另一种可以在桌面/等上显示。这两个不同的项目也有工具提示,我希望始终显示(所以不使用悬停)

我遇到的问题是,即使响应元素(div或本例中的按钮)被隐藏,也会始终显示工具提示。

screen shot

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

可以吗?

1 个答案:

答案 0 :(得分: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> ...

if ($('#small').is(':visible'))
  $('#small').tooltip(opts).tooltip("show");
if ($('#medium').is(':visible'))
  $('#medium').tooltip(opts).tooltip("show");

...然后检查他们在js中的可见性,如下所示:

{{1}}

我在这里更新了您的PasteBin:http://jsbin.com/UFoRIYex/509/edit