2

電話とタブレットに表示される要素と、デスクトップなどに表示される要素の 2 つの異なる要素を用意しようとしています。これらの 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 に答える