ツールチップに画像を表示させる

ツールチップ画像を含める方法と、ツールチップの動き方のパターンです。

動きは「マウスオーバーで出て、マウスの動きに合わせて動く」「画面下から」「画面右から」「回転しながら」の4パターンです。
まずは基本の「マウスオーバーで出て、マウスの動きに合わせて動く」です。

▼以下が実際のソースサンプルです。

▼CSS

▼HTML

次は、「画面下からアニメーションで出る」です。

bodyにCSSで、overflow: hidden;を記述することで、ツールチップが画面外に移動した時にスクロールバーが出ないようにしています。

次は、「画面右からアニメーションで出る」です。

次は、「回転しながらアニメーションで出る」です。

z-indexを0から1にアニメーションさせることで、変化するz-indexの値を使って角度を計算して回転させています。

今回、参考にさせていただいたのは、
iPhoneのようにフリック操作でスクロールできるjQueryプラグインつくった – テクメモ』さん、
要素を回転させる – jobteck.jp』さんです。
ありがとうございます。

デモページは、こちら