スタイルシートでをスタイリングする代わりに、ツールチップのテンプレートを変更し.tooltip-inner
て、スタイルをツールチップに直接追加できます。
ほとんどの場合、要素にスタイルを直接適用することになるため、これはおそらく良い考えではありませんが、これが唯一のオプションである場合や何らかの理由で最適なオプションである場合には、これが可能であることに注意してください。
$(selector).tooltip({
title: "Lorem ipsum ...",
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>',
});
または、属性として:
<span
data-toggle="tooltip"
title="Lorem ipsum ..."
data-template='<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>'
>Some abbreviation</span>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
});
template
オプション:
ツールチップの作成時に使用するベース HTML。
ツールチップtitle
は に挿入されます.tooltip-inner
。
.tooltip-arrow
ツールチップの矢印になります。
最も外側のラッパー要素には.tooltip
クラスが必要です。
デフォルトは次のとおりです。
'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
別の方法として、独自のクラスをテンプレートに追加し、カスタム クラスのスタイルを設定することもできます。
$(selector).tooltip({
title: "Lorem ipsum ...",
template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner my-custom-tooltip"></div></div>',
});
.my-custom-tooltip {
max-width: none;
}