0

上からスライドしてくるツールチップ

上からスライドしてくるツールチップ

テキストにマウスオーバーすると、上からスライドしながらツールチップが表示されるような動きを実装していきたいと思います。

 

 

DEMO

まずは、必要なソースをダウンロードしてください。

ダウンロード

 

HTMLを記述

 対象となるテキストを囲う要素<div>に対し、クラス名「tTip」を指定します。クラス名を変更する場合は「jquery.betterTooltip.js」の方も修正してください。そのままであれば変更の必要はありません。

 

jQueryと「jquery.betterTooltip.js」を読み込む

オプションとして「speed」「delay」をお好みで設定してみてください。

 

CSSを記述

 CSSでツールチップを出したい場所や、ツールチップ自体の形状を指定します。

 

これで完了です。

後はそれぞれお好みの設定でカスタマイズしてみてください。

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > 上からスライドしてくるツールチップ