jqueryを利用してツールチップ的なものを自作

すでに世の中にはあまたのツールチップ系プラグインが存在していますが、そんな中、あえてjqueryを利用してツールチップ的なものを自作してみました。 仕様は指定されたaタグのテキストを元にspanタグを生成してツールチップ的な表示を実行するというものです。

メニューはこんな感じ

li.slide-menuにマウスオーバーしたときにa要素のテキストからspan要素をつくって表示。マウスアウトしたらspan要素を削除するようにしています。

ざっくりとした解説というかメモ

  1. 1.li要素のidを取得して変数$sidに格納
  2. 2.取得したid内のa要素の文字を取得して変数$nameに格納
  3. 3.aタグの後ろにspan要素を作成
  4. 4.span要素を削除
  5. 例:メニュー2にマウスオーバーした場合。

    1. 1.li要素のid「menu02」を$sidに格納
    2. 2."ul#menu li#menu02 a.curtain-links"に該当するテキスト「メニュー2」を取得して変数$nameに格納
    3. 3."ul#menu li#menu02 a"の後ろにメニュー2を作成
    4. 4.マウスアウトとしたらメニュー2を削除
投稿日
カテゴリ