レスポンシブなツールチップを作ってみる(2)~アニメーションと吹き出し~

ふわっと現れるツールチップ

前回、ツールチップの表示/非表示に「display: none;」を使いました。こちらのリンクにある通り、displayプロパティはCSSアニメーションが適用されるCSSプロパティに含まれていないため、このままではアニメーションさせることはできません。そこで、opacityプロパティを利用した方法を用います。

※リンク先はCSS3 Transisionsの適用可能プロパティの説明ですが、CSS3 Animationsも同様です。

displayで表示/非表示を切り替えている要素のアニメーション

前回のサンプルでdisplayを使っている部分です。

前回のサンプルではツールチップ表示用の「tooltip-show」クラスを作ってjQueryで切り替えていましたが、今回はそれを止めてjQueryのanimate関数を使います。当サイトの「シンプルな左サイドのスライドメニューを作る【jQuery使用】」というページでanimate関数を使ったアニメーションをやっています。その応用です。まず上記のCSSから「tooltip-show」クラスを削除します。そしてツールチップ本体のCSS定義に「opacity: 0;」を追加します。

次にjQuery部分ですが、こうなります。

displayプロパティではなく、opacityプロパティをアニメーションさせています。マウスオーバーするとまず「display:none」が「display:block」に変わり(この時点でopacity:0の透過状態)、アニメーションでだんだんopacityが1になり、ツールチップがフェードインするように見えるというイメージです。

逆にマウスアウト時にはツールチップをフェードアウトさせます。その場合はanimate関数でopacityを0に変化させ、その変化が終わった後、すなわちanimate関数のコールバックでツールチップを「display:none」にして非表示にします。

これでツールチップのアニメーションは完成です。

CSSで作る吹き出し

次に、CSSで吹き出しを作ります。

・・・と言いたいのですが、吹き出しを一から作るのは今回の話とはあまり関係ないため、出来ているものを借ります。以下のリンクは「Pure CSS speech bubbles」というサイトで、CSSを使った様々なカッコいい吹き出しのサンプルがあります。このサンプルのコードを参考にして吹き出しを作ります。

Pure CSS speech bubbles

このサイトのデモページにある黄色いグラデーションの吹き出しを使います。CSSを見るとひげが上下左右にあるパターン用意されているようですが、今回は上下のパターンがあればよいです。そんな感じで必要なところだけピックアップして作った吹き出しのサンプルが下です。

吹き出しのサンプルです(下向き)
吹き出しのサンプルです(上向き)

この吹き出しのひげは:after疑似要素で表現されています。今回はマウスオーバーしたテキストリンクの位置によってツールチップのひげの位置を動的に変化させたいのですが、jQueryではCSS疑似要素を変更できません。

jQueryでCSS疑似要素を変更する

と言ってもうまいやり方があるわけではなく、CSS疑似要素を使ったCSS定義をHTMLのstyleタグとしてHTMLに埋め込むという方法を取ります。

HTML

headタグ内に以下のstyleタグを書いておきます。

jQuery

styleタグをjQueryのreplaceWith関数で差し替えてます。動的な定義は文字列置換で変更します。[left-size]というのは文字列置換対象の任意の名前で、この部分が動的な定義に変更されます。ここはCSSで使わない文字列にしておきます。

こんな感じであれやこれややった結果、次のようになりました。

テキストリンクの位置によってツールチップのひげの位置を変える

ツールチップのサンプルです。ツールチップのサンプルです。ツールチップのサンプルです。ツールチップのサンプルです。ツールチップのサンプルです。ツールチップのサンプルです。ツールチップのサンプルです。ツールチップのサンプルです。ツールチップのサンプルです。ツールチップのサンプルです。

ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97
ツールチップ(英語:tooltip)とは、グラフィカルユーザインタフェース(GUI)において普及した表現手法・共通要素のひとつ(ウィジェット)である。ユーザーがカーソルを何かの項目に合わせたとき、その項目に覆いかぶさるような形で小さな枠が出現し、その枠内には選択された項目に関する補足情報が表示される。
引用元:https://ja.wikipedia.org/wiki/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97


長いですがjQueryコードです。

次に、CSSです。

あとは吹き出しの位置をちゃんと計算してテキストリンクの位置に合わせていけばいけそう・・・。

広告
  • LINEで送る