web-dev-qa-db-ja.com

Bootstrap tooltip data-container = body and limit scope of css on .tooltip-inner

bootstrap 3.3ツールチップを使用していて、ツールチップがクロップ/非表示になっているときに問題が発生しました。data-container="body"を設定することで解決しました。

<!--...-->
<span class="callOutImg">
  <a href="#" data-toggle="tooltip" data-container="body" data-placement="top" class="optionTooltip" title="Hello my name is Inigo Montoya">
    <img src='/images/info-bubble-big.png' />
  </a>
</span>
<!--...-->

これらの効果を使用すると、すべてのツールチップが必要になります。

ただし、ページ上のツールチップのサブセットに対してのみ.tooltip-innerに特定のスタイルを設定したいと思います。ただし、これらのツールチップはbodyに含まれているため、スコープは多かれ少なかれグローバルです。

私はこれらを使用して.tooltip-innerにのみアクセスできます：

body .tooltip-inner {
  background-color: #40a0d0;
}

または

.tooltip-inner {
  background-color: #40a0d0;
}

別のdata-containerを設定するにはどうすればよいですか？ （私はクラスとIDを試しました）または.tooltip-innerの選択範囲を制限する方法を誰かが提案できますか？

twitter-bootstraptwitter-bootstrap-tooltipdata-containers
10
Jason

要素にdata-container="body"を設定している場合でも、関連付けられている要素に基づいてcssクラスをツールチップに追加する方法があります。

$('.element1')
    .tooltip()
    .each(function() {
        $(this).data('bs.tooltip').tip().addClass('tooltip-class1');
    });

実際の例を見る ここ

2
Ferrard

http://jsfiddle.net/62p0u2nr/ 一意のID名を付けてdivにそれらすべてを入れてみてください（私は "yep"と呼んでいます）。

data-container="yep"

今.tooltip-innerはcssから直接アクセスできます。

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.tooltip-inner {
  background-color: #40a0d0;
}

<div id="yep">
  <span class="callOutImg">
    <a href="#" data-toggle="tooltip" data-container="yep" data-placement="top" class="optionTooltip" title="Hello my name is Inigo Montoya">
      <img src="http://placehold.it/350x150" />

    </a>
  </span>
</div>
0
Sanova

Angular 4プロジェクトでこの問題が発生しています。Bootstrap 3のドキュメントをもう一度読むと、デフォルトを上書きするために使用できる「テンプレート」と呼ばれるAPIがあることがわかりますクラスです。ここに私が思いついたものがあります：

JSの場合：

// inject customized class into this tooltip so we can style it in global css without impact other tooltips.
    const tooltipTemplate = `
    <div class="tooltip" role="tooltip">
        <div class="tooltip-arrow my-tooltip-arrow"></div>
        <div class="tooltip-inner my-tooltip-inner"></div>
    </div>`;

    $('[data-toggle="tooltip"]').tooltip({
        template: tooltipTemplate
    });

次に、私のグローバルCSSで：

.tooltip-inner.my-tooltip-inner {
   max-width: 500px;
   background: #f2f2f2;
   /*do whatever you want*/
 }

FYI-data-template属性の使用は非Angularプロジェクトでも機能するはずです

0
wctiger