私がやろうとしているのは、ツールチップの色を赤に変更することです。ただし、他の複数の色も使用したいので、元のツールチップの色を単に置き換えたくありません。
どうすればこれを行うことができますか？
398261 次
35 に答える
201
次の方法で使用できます。
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Tooltip on bottom"
class="red-tooltip">Tooltip on bottom</a>
そしてCSSで：
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
Moeen MH :ブートストラップの最新バージョンでは、黒い矢印を取り除くためにこれを行う必要があるかもしれません:
.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
これを Bootstrap 4 に使用します。
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00; /* Red */
}
完全なスニペット:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
}).tooltip-main {
width: 15px;
height: 15px;
border-radius: 50%;
font-weight: 700;
background: #f3f3f3;
border: 1px solid #737373;
color: #737373;
margin: 4px 121px 0 5px;
float: right;
text-align: left !important;
}
.tooltip-qm {
float: left;
margin: -2px 0px 3px 4px;
font-size: 12px;
}
.tooltip-inner {
max-width: 236px !important;
height: 76px;
font-size: 12px;
padding: 10px 15px 10px 20px;
background: #FFFFFF;
color: rgba(0, 0, 0, .7);
border: 1px solid #737373;
text-align: left;
}
.tooltip.show {
opacity: 1;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
/* Red */
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="tooltip-main" data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span class="tooltip-qm">?</span></div>
<style>
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
/* Red */
}
</style>于 2013-07-14T18:43:38.590 に答える
10
Bootstrap 4 では、これらのスタイルを Bootstrap Sass 変数ファイルで直接カスタマイズできるため、_variables.scss には次のオプションがあります。
//== Tooltips
//
//##
// ** Tooltip max width
$tooltip-max-width: 200px !default;
// ** Tooltip text color
$tooltip-color: #fff !default;
// ** Tooltip background color
$tooltip-bg: #000 !default;
$tooltip-opacity: .9 !default;
// ** Tooltip arrow width
$tooltip-arrow-width: 5px !default;
// ** Tooltip arrow color
$tooltip-arrow-color: $tooltip-bg !default;
ここを参照してください: http://v4-alpha.getbootstrap.com/getting-started/options/
Sass で作業し、Grunt または Gulp ビルド ツールを使用してコンパイルするのが最適です。
于 2016-11-05T06:55:19.650 に答える
8
私のjQuery修正：
HTML:
<a href="#" data-toggle="tooltip" data-placement="right" data-original-title="some text">
<span class="glyphicon glyphicon-question-sign"></span>
</a>
jQuery:
$('[data-toggle="tooltip"]').hover(function(){
$('.tooltip-inner').css('min-width', '400px');
$('.tooltip-inner').css('color', 'red');
});
于 2014-12-23T19:07:36.573 に答える
4
これを使用して問題を解決できます。プロジェクトで確認しましたが、正常に動作します。
<a class="btn btn-sm btn-success media-tooltip" href="#" data-toggle="tooltip" data-placement="bottom" title="Download Now">Download Now</a>
.media-tooltip + .tooltip .tooltip-inner {
font-size: 14px;
font-weight: 700;
color: rgb( 37, 207, 187 );
border-width: 1px;
border-color: rgb( 37, 207, 187 );
border-style: solid;
background-color: rgb( 219, 242, 239 );
padding: 10px;
border-radius: 0;
}
.media-tooltip + .tooltip > .tooltip-arrow{display: none;}
.media-tooltip + .tooltip .tooltip-inner:after, .media-tooltip + .tooltip .tooltip-inner:before {
bottom: 89%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.media-tooltip + .tooltip .tooltip-inner:after {
border-color: rgba(219, 242, 239, 0);
border-bottom-color: #dbf2ef;
border-width: 10px;
margin-left: -10px;
}
.media-tooltip + .tooltip .tooltip-inner:before {
border-color: rgba(37, 207, 187, 0);
border-bottom-color: #25cfbb;
border-width: 11px;
margin-left: -11px;
}
于 2015-03-10T06:10:08.333 に答える
4
これはすでに正しく回答されていますが、私も意見を述べるべきだと思います。cozenが言うように、これは境界線であり、それが機能するためには、ブートストラップが指定するのと同じ方法でこれをフォーマットするクラスを指定する必要があります. だから、あなたはこれを行うことができます
.tooltip .tooltip-inner {background-color: #00a8c4; color: black;}
.tooltip.top .tooltip-arrow {border-top-color: #00a8c4;}
または、ツールチップの矢印のためだけに次のものを実行できますが、!important を追加して、ブートストラップ css を上書きする必要があります。
.tooltip-arrow {border-top-color: #00a8c4!important;}
于 2016-02-22T12:42:57.340 に答える
2
矢印については、まず使用している方向を確認してください。たとえば、私はleft方向を使用しています。
.tooltip .tooltip-inner {
background-color:#2fa5fb;
}
.tooltip.left > .tooltip-arrow {
border-left-color: #2fa5fb;
}
于 2016-10-15T21:13:43.920 に答える
2
これは、矢印 (矢印の境界線と背景も同様) を含むツールチップの色を簡単に制御するのに役立つ SCSS コード (以下にコンパイルされた css) です。
注: CSS ルールを有効にするために、いくつかの場所に「重要」を追加する必要がある場合があります。注 2: ここでのスタイルは、TOP および BOTTOM ツールチップ レイアウトでのみ機能します。スタイルを自由に追加してください (&.bs-tooltip-left、&.bs-tooltip-right など)
SCSS :
$tt-text-color: lime;
$tt-border-color: lime;
$tt-bg-color: black;
$arrow-border-color: lime;
$arrow-bg-color: black;
.tooltip {
.tooltip-inner {
background: $tt-bg-color;
color: $tt-text-color;
border: 2px solid $tt-border-color;
}
.arrow {
width: 11px;
height: 11px;
border: 2px solid $arrow-border-color;
bottom: 1px;
&:before {
width: 11px;
height: 11px;
background: $arrow-bg-color;
border: 0;
}
}
&.bs-tooltip-top {
.arrow {
transform: rotate(-135deg);
}
}
&.bs-tooltip-bottom {
.arrow {
transform: rotate(135deg);
top: 2px;
}
}
}
CSS :
.tooltip .tooltip-inner {
background: black;
color: lime;
border: 2px solid lime;
}
.tooltip .arrow {
width: 11px;
height: 11px;
border: 2px solid lime;
bottom: 1px;
}
.tooltip .arrow:before {
width: 11px;
height: 11px;
background: black;
border: 0;
}
.tooltip.bs-tooltip-top .arrow {
transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
transform: rotate(135deg);
top: 2px;
}
実際の例:
jQuery(document).ready(function(){
$('a').tooltip();
});.tooltip .tooltip-inner {
background: black;
color: lime;
border: 2px solid lime;
}
.tooltip .arrow {
width: 11px!important;
height: 11px!important;
border: 2px solid lime;
bottom: 1px;
}
.tooltip .arrow:before {
width: 11px;
height: 11px;
background: black;
border: 0;
}
.tooltip.bs-tooltip-top .arrow {
transform: rotate(-135deg);
}
.tooltip.bs-tooltip-bottom .arrow {
transform: rotate(135deg);
top: 2px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<div class="text-center py-4">
<a class="cn-box big cn-copy" data-toggle="tooltip" data-placement="bottom" title="Hello There">
try me
</a>
</div>于 2020-03-12T11:22:07.107 に答える
2
色を変更したいだけの場合は、他の回答で言及されているクイックアプローチを使用できます。ただし、Bootstrap を使用している場合は、ルック アンド フィールが一貫するようにテーマを使用する必要があります。残念ながら、Bootstrap のテーマは組み込みでサポートされていないため、これを行う CSS を少し書きました。基本的に、要素に追加してテーマを適用できるなどのクラスを取得tooltip-infoしtooltip-warningます。
この回答では、フィドル、例、その他の説明とともにこのコードを見つけることができます: https://stackoverflow.com/a/20880312/207661
于 2014-01-02T10:04:32.590 に答える
2
Bootstrap 3 (4 ではテストされていません) では、ツールチップの作成時にテンプレートを使用してデフォルトの色をオーバーライドできます。このメソッドを使用すると、ツールチップの色のランタイムを指定できます。
var bgColor = '#dd0000'; //red
var textColor = '#ffffff'; //white
$('#yourControlId').tooltip({
placement: "top",
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow" style="border-top-color:' + bgColor + ';"></div><div class="tooltip-inner" style="background-color:' + bgColor + ';color:' + textColor + ';"></div></div>'
});
テンプレートは、元のツールチップ テンプレートに基づいています。カラースタイルのみを追加しました。矢印のスタイルのため、配置は上でなければなりません。(他の配置タイプは試していません)
于 2020-11-12T13:10:00.113 に答える
1
$(document).ready(function(){
$('.tooltips-elements')
.tooltip()
.each(function() {
var color = $(this).data('color');
$(this).hover(function(){
var aria = $(this).attr('aria-describedby');
$('#' + aria).find('.tooltip-inner').css({
"background": color,
"color" : "#333",
"margin-left" : "10px",
"font-weight" : "700",
"font-family" : "Open Sans",
"font-size" : "13px",
});
$('#' + aria).find('.tooltip-arrow').css({
"border-bottom-color" : color,
});
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="tooltips-elements" data-toggle="tooltip" data-placement="bottom" data-original-title="Here comes the tooltip" data-color="red">Hover me</a>これを確認してください。複数のツールチップの色を設定できます。
于 2016-06-29T08:59:15.270 に答える
0
ウェブサイトでブートストラップ 3.0 を使用していますが、ツールチップのスタイルを更新する際に上記の手順のいずれも機能しませんでした。しかし、代わりにjQueryUIスタイリングを使用して解決策を見つけました
https://jqueryui.com/tooltip/#custom-style
CSS
.ui-tooltip, .arrow:after {
background: black;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
HTML
<div class="qu_help" data-toggle="tooltip" title="Some Random Title">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</div>
他の誰かが私と同じような状況にある場合に備えて、この回答を追加しています。
于 2016-11-03T20:38:26.157 に答える
0
CSS 経由のBootstrap 4バージョンの場合:
バルーンの背景色を変更したい場合：
/* change style balloon */
.tooltip-inner {
background-color: green !important;
color: #fff;
}
下の位置に表示されるときに矢印を変更したい場合：
/* change style arrow */
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
border-bottom-color: #f00;
}
お役に立てれば幸いです
于 2019-02-13T11:18:06.027 に答える