私は、すべてのツールチップに影響を与えることなく、いくつかのbootstrap-tooltip.jsツールチップをスタイル(CSS)したいと思います。私は、多くの異なる解決策を試しましたが、私はいつも、ツールチップをトリガーする要素にクラスを追加することになっています。
これは、私が試したものです。
$(function(){
$("[id$=amount]").tooltip({
trigger: 'manual',
placement: 'right'
}).addClass("test"); // <--- This does not help me. Class just ends up
}); // in the trigger element. Se html output
// from firebug below...
しかし、その場合、クラスはツールチップをトリガーする要素で終わってしまいます。
<input
id="list_wishes_attributes_0_amount"
class="test" <!-- The class I tried to add to the tooltip ended up here. -->
type="text"
tabindex="3"
size="30"
rel="tooltop"
name="list[wishes_attributes][0][amount]"
min="0"
data-original-title="Only numbers please"
/>
どうすれば、ツールチップのためにカスタムクラスを割り当てて、それをトリガーする入力フィールドを割り当てないことができますか?
Bootstrap 4以前。
$().tooltip({
template: '<div class="tooltip CUSTOM-CLASS"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
})
Bootstrap 4:
$().tooltip({
template: '<div class="tooltip CUSTOM-CLASS" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
})
htmlオプションを
trueに設定し、
YOUR TEXTのようなものを
title` オプションに挿入してみてください。
$(function(){
$("[id$=amount]").tooltip({
trigger: 'manual',
placement: 'right',
html: true,
title: '<span class="test">YOUR TEXT</span>'
});
});
正直なところ、これがうまくいくかどうかはわかりませんが、試してみる価値はあると思います。
EDIT:この記事]1を読んだ後だと、より参考になるかもしれません。