trying to use bootstrap3 tooltips with responsive utilities

Question

I'm trying to have two different elements, one that would be shown on phones + tablets, and one that would be shown on desktops/etc. These two different items also have tooltips, that I want to always be shown (so not using the hover)

The issue I'm running into, is both tooltips are always displayed, even if the responsive element (div, or a button in this case) are hidden.

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");

I have an example JSBin: http://jsbin.com/UFoRIYex/508/edit

Possible to do?

Answer 1

The issue is caused by the fact that you are applying the tooltip either way, irrespective of if the button is visible at all. To go around that, you'll have to first give an id to your 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>

... then check for their visibility in js as follows:

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

I updated your PasteBin here: http://jsbin.com/UFoRIYex/509/edit