web-dev-qa-db-ja.com

位置に基づくTwitter Bootstrapのツールチップの色の変更

ツールチップのさまざまな色を出力しようとしています（編集：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/

javascriptcsstwitter-bootstraptooltip
15
Simon

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

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

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

編集：更新されたソリューション：

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')});
});
15
Miha Rekar

ツールチップを使用している場合は、情報、成功、危険、警告である組み込みのテーマの色を使用できます。ただし、Bootstrapはツールチップのテーマをサポートしていません（執筆時点ではV3））が、CSSを数行追加してこれを実現できます。

理想的には、呼び出している要素に適用できるクラス_tooltip-info_、_tooltip-danger_、_tooltip-success_などのセットですtooltip()。これを正確に実行し、Bootstrap 3.0。

結果

enter image description here

enter image description here

それはどのように機能しますか

以下のコードは、ツールチップによく似ているため、基本的にアラートコンポーネントのスタイルを再利用します。これを行うと、背景色だけでなくテキストの色や境界線の色も変更されるなど、いくつかの利点があることに注意してください。さらに、ツールチップがわずかに透明な光沢のある外観になります。ツールチップの矢印は境界線の色に依存するため、アラートコンポーネントの境界線の色を継承することで個別に変更されます。

また、これらはグローバルな変更ではないことにも注意してください。 _tooltip-info_のようなクラスを適用しない限り、デフォルトのツールチップが表示されます。

使用法

_<span class="tooltip-info"  title="Hello, I'm dangerous">
    Hover here to see tooltip!
</span>
_

Bootstrapツールチップはデフォルトではアクティブ化されていないため、このようにアクティブ化する必要があります（ https://stackoverflow.com/a/20877657/207661 を参照））

_$(document.body).tooltip({ selector: "[title]" });
_

Fiddle

ここでこのコードを試してください： http://jsbin.com/usIyoGUD/3/edit?html,css,output

LESS CSSソース

_//Import these from your own Bootstrap folder
@import  "js/ext/bootstrap/less/mixins.less";
@import  "js/ext/bootstrap/less/variables.less";

.tooltip-border-styles(@borderColor) {
    & + .tooltip {
        &.top .tooltip-arrow,
        &.top-left .tooltip-arrow,
        &.top-right .tooltip-arrow {
            border-top-color: @borderColor;
        }
        &.bottom .tooltip-arrow,
        &.bottom-left .tooltip-arrow,
        &.bottom-right .tooltip-arrow {
            border-bottom-color: @borderColor;
        }
        &.right .tooltip-arrow {
            border-right-color: @borderColor;
        }
        &.left .tooltip-arrow {
            border-left-color: @borderColor;
        }
    }
}

.tooltip-info {
  & + .tooltip .tooltip-inner {
    .alert-info;
  }
  .tooltip-border-styles(@alert-info-border);
}
.tooltip-danger {
  & + .tooltip .tooltip-inner {
    .alert-danger;
  }
  .tooltip-border-styles(@alert-danger-border);
}
.tooltip-warning {
  & + .tooltip .tooltip-inner {
    .alert-warning;
  }
  .tooltip-border-styles(@alert-warning-border);
}
.tooltip-success {
  & + .tooltip .tooltip-inner {
    .alert-success;
  }
  .tooltip-border-styles(@alert-success-border);
}
_

コンパイルされたCSS

LESSを使用していないか、それを処理したくない場合は、以下のコンパイル済みCSSを直接​​使用できます。

_.tooltip-info + .tooltip .tooltip-inner {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
  background-repeat: repeat-x;
  border-color: #9acfea;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}
.tooltip-info + .tooltip.top .tooltip-arrow,
.tooltip-info + .tooltip.top-left .tooltip-arrow,
.tooltip-info + .tooltip.top-right .tooltip-arrow {
  border-top-color: #bce8f1;
}
.tooltip-info + .tooltip.bottom .tooltip-arrow,
.tooltip-info + .tooltip.bottom-left .tooltip-arrow,
.tooltip-info + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #bce8f1;
}
.tooltip-info + .tooltip.right .tooltip-arrow {
  border-right-color: #bce8f1;
}
.tooltip-info + .tooltip.left .tooltip-arrow {
  border-left-color: #bce8f1;
}
.tooltip-danger + .tooltip .tooltip-inner {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
  background-repeat: repeat-x;
  border-color: #dca7a7;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
}
.tooltip-danger + .tooltip.top .tooltip-arrow,
.tooltip-danger + .tooltip.top-left .tooltip-arrow,
.tooltip-danger + .tooltip.top-right .tooltip-arrow {
  border-top-color: #ebccd1;
}
.tooltip-danger + .tooltip.bottom .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-left .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #ebccd1;
}
.tooltip-danger + .tooltip.right .tooltip-arrow {
  border-right-color: #ebccd1;
}
.tooltip-danger + .tooltip.left .tooltip-arrow {
  border-left-color: #ebccd1;
}
.tooltip-warning + .tooltip .tooltip-inner {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
  background-repeat: repeat-x;
  border-color: #f5e79e;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.tooltip-warning + .tooltip.top .tooltip-arrow,
.tooltip-warning + .tooltip.top-left .tooltip-arrow,
.tooltip-warning + .tooltip.top-right .tooltip-arrow {
  border-top-color: #faebcc;
}
.tooltip-warning + .tooltip.bottom .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-left .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #faebcc;
}
.tooltip-warning + .tooltip.right .tooltip-arrow {
  border-right-color: #faebcc;
}
.tooltip-warning + .tooltip.left .tooltip-arrow {
  border-left-color: #faebcc;
}
.tooltip-success + .tooltip .tooltip-inner {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  background-repeat: repeat-x;
  border-color: #b2dba1;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
}
.tooltip-success + .tooltip.top .tooltip-arrow,
.tooltip-success + .tooltip.top-left .tooltip-arrow,
.tooltip-success + .tooltip.top-right .tooltip-arrow {
  border-top-color: #d6e9c6;
}
.tooltip-success + .tooltip.bottom .tooltip-arrow,
.tooltip-success + .tooltip.bottom-left .tooltip-arrow,
.tooltip-success + .tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #d6e9c6;
}
.tooltip-success + .tooltip.right .tooltip-arrow {
  border-right-color: #d6e9c6;
}
.tooltip-success + .tooltip.left .tooltip-arrow {
  border-left-color: #d6e9c6;
}
_
16
Shital Shah

私はあなたの問題の別の解決策を見つけました（私は同じことをやろうとしていました）。メインのCSSスタイルシートの色を変更するだけです（スタイルシートがbootstrapの後にある場合）、ブートストラップが上書きされます）。

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

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

.tooltip.top .tooltip-arrow {
  border-top-color: #D13127;
}
14
Liz Goncalves

参照 動的にクラスをBootstrapの「ポップオーバー」コンテナに追加

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

2
Peter Ehrlich

ここに私がsassでそれをする方法があります

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

  .tooltip.in
    opacity: .9

そして、位置依存部分

  .tooltip.bottom .tooltip-arrow
    border-bottom-color: #fff
1
Emanuel

同様の質問への私の返信を参照してください： Change bootstrap tooltip color

これは、Bootstrap 3またはBootstrap 4。

Bootstrap 3:

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});

例：
Bootstrap の場合
for Bootstrap 4

0
Sergey Nudnov