Bootstrapのツールチップにアニメーションを付ける
ここのところBootstrapを使った案件が続いているともよーんです。
今回はBootstrapのツールチップにアニメーションを追加する方法をお伝えしようと思います。
今回はツールチップが上に出るパターンを例にとってアニメーションを追加していきます。
まず、普通に表示させるにはhtmlとjQueryで以下のように記述します。button要素ではなくaタグでもdata-toggleとdata-placement、titleを付ければツールチップは出てきます。
<button type="button" class="任意のクラス名" data-toggle="tooltip" data-placement="top" title="ツールチップの内容">
Tooltip on top
</button>$('[data-toggle="tooltip"]').tooltip();デフォルトの状態でfade animationのオプションがtrueになっていますが、残念ながらそれ以外のアニメーションは指定できません。
そこで、新たにクラスを付与して、それに対してcssでアニメーションをつける形で対応していきます。
公式サイトを参考に、先程のjQueryの記述に以下のように追記してツールチップが出現した時にslideInDownクラスが付くようにします。
参考：Tooltips – Bootstrap 4.2 – 日本語リファレンス
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$('.tooltip.top').addClass('slideInDown');
});そしてこのslideInDownクラスの要素に対してcssで上から下に降りてくるアニメーションを付けていきます。
.tooltip.top {
visibility: hidden;
&.slideInDown {
visibility: hidden;
animation-name: slideInDown;
animation-duration: .3s;
animation-fill-mode: forwards;
}
}
@keyframes slideInDown {
0% {
visibility: hidden;
transform: translateY(0);
}
5% {
visibility: visible;
transform: translateY(-5px);
}
100% {
visibility: visible;
transform: translateY(0);
}
}ポイントは、transform: traslateYの指定を、keyframesの0%と100%の両方で0にすることです。これをしなかった場合は、bootstrapのライブラリ側でツールチップの位置が計算されるタイミングによって、ツールチップの位置が1回目出現時と2回目出現時で変わってしまいました、、。なので、動かしたら元に戻すことに気をつけましょう。
あとはdisplayプロパティはライブラリ側で付けられるものと被って表示を狂わせてしまう恐れがあるので使用を避けて、表示・非表示はvisibilityプロパティで切り替えるようにしました。
今回はBootstrap4系の情報を参考にアニメーション用の追加クラスを付けましたが、Bootstrap3でも実現可能でした。レガシーなサイトを少し可愛くしてあげるのもいいかもしれません。また、tooltipを上に表示する場合だけでなく、右や下など他の方向に出る場合でも同じ方法でアニメーションを付けられます。その場合はJSでaddClassする対象のセレクタを変更して、あとはcssで動く方向を変えてあげると実現できます。
