私がやろうとしていることは、ツールチップの色を赤に変更することです。ただし、他の複数の色も使用したいので、元のツールチップの色を単に置き換えたくありません。
これを行うにはどうすればよいですか?
私がやろうとしていることは、ツールチップの色を赤に変更することです。ただし、他の複数の色も使用したいので、元のツールチップの色を単に置き換えたくありません。
これを行うにはどうすればよいですか?
回答:
次のように使用できます。
<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;}
これをブートストラップ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: rgb(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>
.red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}
.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}
container
オプションをデフォルトのままにしておくと便利です。ただし、container: "body"
ツールチップがオーバーフローとしてクリップされないようにを作成すると、CSSセレクターが壊れます。
ブートストラップ2
キャレット/矢印も変更する場合は、次の操作を行います。
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow {border-bottom-color: #f00;}
または
.red-tooltip + .tooltip > .tooltip-inner, .red-tooltip + .tooltip > .tooltip-arrow {background-color: #f00;}
jsFiddle:http ://jsfiddle.net/technotarek/2htZe/
更新:ブートストラップ3
Bootstrap 3のツールチップの方向を特定する必要があります。次に例を示します。
.tooltip.top .tooltip-inner {
background-color:red;
}
.tooltip.top .tooltip-arrow {
border-top-color: red;
}
jsFiddle(Bootstrap 3を使用したすべてのツールチップ指示):http ://jsfiddle.net/technotarek/L2rLE/
私のために働く唯一の方法:
$(document).ready(function() {
//initializing tooltip
$('[data-toggle="tooltip"]').tooltip();
});
.tooltip-inner {
background-color: #00acd6 !important;
/*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
color: #fff;
}
.tooltip.top .tooltip-arrow {
border-top-color: #00acd6;
}
.tooltip.right .tooltip-arrow {
border-right-color: #00acd6;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #00acd6;
}
.tooltip.left .tooltip-arrow {
border-left-color: #00acd6;
}
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--tether-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<!--Bootstrap-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!--Tooltip Example-->
<div style="padding:50px;">
<span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="right" title="custom colored tooltip">hover over me
</span>
</div>
bootstrap4には、次のコードを使用しました。
.tooltip-inner {
background-color: #color !important;
color: #color ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
border-top-color: #color !important;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
border-right-color: #color !important;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
border-bottom-color: #color !important;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
border-left-color: #color !important;
}
これがブーストラップのツールチップコードです...
.tooltip {
position: absolute;
z-index: 1070;
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
filter: alpha(opacity=0);
opacity: 0;
line-break: auto;
}
.tooltip.in {
filter: alpha(opacity=90);
opacity: .9;
}
.tooltip.top {
padding: 5px 0;
margin-top: -3px;
}
.tooltip.right {
padding: 0 5px;
margin-left: 3px;
}
.tooltip.bottom {
padding: 5px 0;
margin-top: 3px;
}
.tooltip.left {
padding: 0 5px;
margin-left: -3px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
right: 5px;
bottom: 0;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 5px;
margin-bottom: -5px;
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 5px;
margin-top: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000;
}
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ビルドツールを使用してコンパイルするのが最適です。
私の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');
});
これを使用して問題を解決できます。私は自分のプロジェクトでそれをチェックしました、そしてそれはうまくいきます。
<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;
}
これはすでに正解ですが、私も自分の意見を述べるべきだと思います。cozenが言うにはこれはボーダーであり、それが機能するためには、ブートストラップが指定するのと同じ方法でこれをフォーマットするためにクラスを指定する必要があります。だから、これを行うことができます
.tooltip .tooltip-inner {background-color: #00a8c4; color: black;}
.tooltip.top .tooltip-arrow {border-top-color: #00a8c4;}
または、ツールチップの矢印だけで次のコマンドを実行できますが、!simportantを追加して、ブートストラップcssを上書きする必要があります
.tooltip-arrow {border-top-color: #00a8c4!important;}
上記のいずれでもない場合はcontainer: 'body'
問題なく機能し、次の解決策は機能します。
// Assign custom CSS class after the tooltip template has been added to the DOM
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});
そして簡単なCSSスニペット:
.tooltip.tooltip-danger > .tooltip-inner {
background-color: #d9534f;
}
.tooltip.tooltip-danger.left > .tooltip-arrow {
border-left-color: #d9534f;
}
これで、通常どおりツールチップを初期化して、data-tooltip-custom-class
属性を介してカスタムCSSクラスを渡すことができます。
<span class="js-tooltip">Hover me totally</span>
<script>
$('.js-tooltip')
.data('tooltip-custom-class', 'tooltip-danger')
.tooltip(/*your options*/)
;
</script>
ブートストラップ4
BootStrap 4を使用する場合、ツールチップはbodyタグの下部に追加されます。ツールチップが別のタグの子である場合、cssを使用してツールチップをターゲットにする方法はありません。私が見つけた唯一の方法は、inserted.bs.tooltipイベントを使用し、クラスを内部のdivと矢印に追加することです。次に、CSSでクラスをターゲットにできます。
// initialize tooltips
$('[data-toggle="tooltip"]').tooltip();
// Add the classes to the toolip when it is created
$('[data-toggle="tooltip"]').on('inserted.bs.tooltip',function () {
var thisClass = $(this).attr("class");
$('.tooltip-inner').addClass(thisClass);
$('.arrow').addClass(thisClass + "-arrow");
});
/* style the tooltip box and arrow based on your class*/
.bs-tooltip-left .redTip {
background-color: red !important
}
.bs-tooltip-left .redTip-arrow::before {
border-left-color: red !important
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<p>Show a red tooltip <a href="#" class="redTip" data-toggle="tooltip" data-placement="left" title="You Did It!">Hover over me</a></p>
色を変更したいだけの場合は、他の回答に記載されているクイックアプローチを使用できます。ただし、Bootstrapを使用している場合は、テーマを使用してルックアンドフィールを一貫させる必要があります。残念ながら、Bootstrapのテーマには組み込みのサポートがないため、これを行うCSSを少し書きました。基本的にtooltip-info
、tooltip-warning
テーマに適用する要素に追加できるなどのクラスを取得します。
このコードは、フィドル、例、および詳細な説明とともにこの回答で見つけることができます:https : //stackoverflow.com/a/20880312/207661
矢印は境界です。
矢印ごとに対応する色を変更する必要があります。
.tooltip.top .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-left .tooltip-arrow {
border-top-color: @color;
}
.tooltip.top-right .tooltip-arrow {
border-top-color:@color;
}
.tooltip.right .tooltip-arrow {
border-right-color: @color;
}
.tooltip.left .tooltip-arrow {
border-left-color: @color;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: @color;
}
.tooltip > .tooltip-inner {
background-color: @color;
font-size: @font-size-small;
}
ただし、色を変更するためにクラスを追加する場合( '.class + .tooltip ...'などのフィドルのように)は機能しません(ブートストラップ3)。
誰かがその処理方法を知っている場合は!??
bootstrap4のツールチップの色を変更します。下、左、右を使用して、.bs-tooltip-topの上部の代わりにそれぞれのCSSを追加できます。
.tooltip-inner {
background-color: #00acd6 !important;
color: #fff;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"]
.arrow::before {
border-top-color: #00acd6;
}
矢印(矢印の境界線と背景も含む)を含むツールチップの色を簡単に制御するのに役立つ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>
$(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>
多分それがあなたを助けることができるこれをチェックしてください。複数のツールチップの色を使用できます。
私たちはウェブサイトでブートストラップ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>
他の誰かが私と同じような状況にある場合に備えて、この回答を追加します。
この簡単な方法は、ブートストラップツールチップの背景色を変更したい場合に役立ちます。
$(function(){
//$('.tooltips.red-tooltip').tooltip().data('bs.tooltip').tip().addClass('red-tooltip');
$('.tooltips.red-tooltip').tooltip().data('tooltip').tip().addClass('red-tooltip');
});
.red-tooltip.tooltip.tooltip.bottom .tooltip-arrow,
.red-tooltip.tooltip.tooltip.bottom-left .tooltip-arrow,
.red-tooltip.tooltip.tooltip.bottom-right .tooltip-arrow{border-bottom-color: red;}
.red-tooltip.tooltip.top .tooltip-arrow {border-top-color: red;}
.red-tooltip.tooltip.left .tooltip-arrow {border-left-color: red;}
.red-tooltip.tooltip.right .tooltip-arrow {border-right-color: red;}
.red-tooltip.tooltip > .tooltip-inner{background-color:red;}
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="" data-original-title="Made by @Ram"
class="tooltips red-tooltip">My link with red tooltip</a>
注A:
js
コードインクルード.data('tooltip')
が機能しない場合は、その行をコメント化し、js
コードインクルードのコメントを外してください.data('bs-tooltip')
。注B:
ブートストラップツールチップ関数がツールチップをボディの最後(要素の直後ではない)に追加する場合、私のソリューションはまだうまくいきますが、このページの他のいくつかの回答は、このシナリオの@Praveen Kumarや@technoTarekのように機能しません。
注C:
このコード支援
tooltip arrow
ツールチップのすべてのプレースメントに色(top
、bottom
、left
、right
)。
tether.jsに依存するBootstrap 4では、.tooltip-arrowクラスが.tooltip.bs-tether-element-attached- [position] {...}に置き換えられました
これが色を変えて下矢印を太くした方法です。border-widthに追加されたすべてのピクセルについて、「下」の位置からピクセルを減算する必要がありました。
.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before, .tooltip.tooltip-bottom .tooltip-inner::before {
border-top-color: #d19b3d !important;
border-width: 10px 10px 0;
bottom: -5px;
}
他の位置に合わせて調整する必要があります。つまり、.tooltip.bs-tether-element-attached-leftの場合は、border-rightを調整し、「左」からピクセルを差し引いてborder-widthを上げる場合は再配置します。
Olegの回答https://stackoverflow.com/a/42994192/9921853が最適です。動的に作成された要素にツールチップスタイルを適用できます。ただし、Bootstrap 4では機能しません。少し変更する必要があります。
ブートストラップ3:
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});
例:https : //www.bootply.com/UORR04ncTP
ブートストラップ4:
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
$(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});
例:https : //jsfiddle.net/nsmcan/naq530hx
完全なソリューション(Bootstrap 3)
JS
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-classes'));
});
$('body').tooltip({
selector: "[title]",
html: true
});
HTML
<h1>Test tooltip styling</h1>
<div><span title="Long-long-long tooltip doesn't fit the single line">Hover over me 1</span></div>
<div><span data-tooltip-custom-classes="tooltip-left" data-container="body" title="Example (left aligned):<br>Tooltip doesn't fit the single line, and is not a sibling">Hover over me 2</span></div>
<div><span class="text-danger" data-tooltip-custom-classes="tooltip-large tooltip-left tooltip-danger" title="Example (left aligned):<br>This long text we want to have in the single line">Hover over me 3</span></div>
CSS
.tooltip.tooltip-large > .tooltip-inner {
max-width: 300px;
}
.tooltip.tooltip-left > .tooltip-inner {
text-align: left;
}
.tooltip.top.tooltip-danger > .tooltip-arrow {
border-top-color: #d9534f;
}
.tooltip.top-left.tooltip-danger > .tooltip-arrow {
border-top-color: #d9534f;
}
.tooltip.top-right.tooltip-danger > .tooltip-arrow {
border-top-color:#d9534f;
}
.tooltip.right.tooltip-danger > .tooltip-arrow {
border-right-color: #d9534f;
}
.tooltip.left.tooltip-danger > .tooltip-arrow {
border-left-color: #d9534f;
}
.tooltip.bottom.tooltip-danger > .tooltip-arrow {
border-bottom-color: #d9534f;
}
.tooltip.bottom-left.tooltip-danger > .tooltip-arrow {
border-bottom-color: #d9534f;
}
.tooltip.bottom-right.tooltip-danger > .tooltip-arrow {
border-bottom-color: #d9534f;
}
.tooltip.tooltip-danger > .tooltip-inner {
background-color: #d9534f;
}
以下のためのブートストラップ4 CSSを介したバージョン:
バルーンの背景色を変更したい場合:
/* 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;
}
あなたが助けてくれることを願っています
BS4プロジェクト内で、SASSコードをコンパイルできる場合は、ミックスインの作成を利用して、あらゆる方向からツールチップのカラースキームを管理できます。
これを実装できる多くの方法の1つを次に示します。
リストを作成し、ループして、考えられる4つの方向すべてをカバーする
//define a color
$m-color-blue: #004c97;
//create a mixin with parameters and default value
@mixin m-tooltip-color-direction($name:'.mtootltip', $color:$m-color-blue) {
//reference your custom class name
#{$name} {
.tooltip-inner {
background-color: $color;
}
//create a list of possible directions
$directions: top bottom left right;
//loop through the list
@each $direction in $directions {
&.bs-tooltip-#{$direction} .arrow:before,
.bs-tooltip-auto[x-placement^="$direction"] .arrow:before {
border-#{$direction}-color: $color !important;
}
}
}
}
メインの.scssファイル内で、次のようにミックスインを呼び出します。
@include m-tooltip-color-direction('.mtooltip', $m-color-blue);
最後に、レイアウトにBS4ツールチップを追加し、柔軟性のためにカスタムクラスを割り当てます。このBS4リソースは、オプションとしてのテンプレートの使用について説明しています。これを使用してカスタムクラスを追加します。
次の例では、情報アイコンバッジにツールチップを追加します。
<span class="badge badge-pill badge-primary" data-toggle="tooltip" data-placement="right" data-html="true" data-template="<div class='tooltip mtooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>" title="<h1 class='text-white'>Tooltip</h1> on bottom">i</span>
この設定を使用すると、元のミックスインに触れることなく、クラス名、色、ツールチップの方向を調整できます。それはどれほどクールですか:)
お役に立てれば!