15

ツールチップ用にさまざまな色を出力しようとしています (編集: Twitter Bootstrap から) が、うまくいかないようです。デフォルトの色を変更するのは難しくありません。.tooltip とそれに関連する定義の色を変更するだけです。

ただし、本文内の特定のツールチップの色を変更したいと仮定すると

<div id="users" class="row">
    <div id="photo_stack" class="span6 photo_stack">
        <img id="photo1" src="" width="400px" height="300px" alt="" rel="tooltip" data-placement="right" title="Other Color" />

のような単純なアプローチ

#users .tooltip { background-color: #somecolor; }

動作しないようです。それはDOMに関するものだと思います。特定のツールチップにある種のクラスを添付する必要がありますか? それとも私は完全にオフですか？ありがとう ：）

ここに JSFiddle があります: http://jsfiddle.net/rZxrm/

4

6 に答える 6

15

Twitterブートストラップにはこの機能が組み込まれていませんが、次のように独自の関数を追加してこれを行うことができます。

$('#photo1').hover(function() {$('.tooltip').addClass('tooltipPhoto')}, function () {$('.tooltip').removeClass('tooltipPhoto')});​

tooltipPhoto次に、CSSでクラスを定義して、異なる背景色を設定する必要があります。

編集：更新された解決策：

function changeTooltipColorTo(color) {
    $('.tooltip-inner').css('background-color', color)
    $('.tooltip.top .tooltip-arrow').css('border-top-color', color);
    $('.tooltip.right .tooltip-arrow').css('border-right-color', color);
    $('.tooltip.left .tooltip-arrow').css('border-left-color', color);
    $('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color);
}

$(document).ready(function () {
    $("[rel=tooltip]").tooltip();
    $('#photo1').hover(function() {changeTooltipColorTo('#f00')});
    $('#photo2').hover(function() {changeTooltipColorTo('#0f0')});
    $('#photo3').hover(function() {changeTooltipColorTo('#00f')});
});
于 2012-09-28T12:44:08.247 に答える
14

あなたの問題に対する別の解決策を見つけました（同じことをしようとしていました）。メインの CSS スタイルシートの色を変更するだけです (スタイルシートがドキュメントのヘッドのブートストラップの後にリストされている限り、ブートストラップの色は上書きされます)。

具体的には、メインのスタイルシートに追加するものを次に示します (例として):

.tooltip-inner {
  background-color: #D13127;
  color: #fff;
}

.tooltip.top .tooltip-arrow {
  border-top-color: #D13127;
}
于 2013-04-10T19:35:10.193 に答える
2

Bootstrap の 'popover' コンテナーにクラスを動的に追加するを参照してください。

彼女の修正により、bootstrap.js を 1 行で変更することにより、データクラス セレクターが可能になります。

于 2012-10-22T19:41:54.103 に答える
1

これが私がsassで行う方法です

  .tooltip-inner
    color: #fff
    background-color: #111
    border: 1px solid #fff

  .tooltip.in
    opacity: .9

そして位置依存部分

  .tooltip.bottom .tooltip-arrow
    border-bottom-color: #fff
于 2014-01-31T19:56:46.887 に答える