DEMOページはこちらになります。使い方ツールチップの表示は3つの手順で終わります。以下のソースコードをCSSファイルに記述するか、<style></style>タグでHTMLに埋め込みます。以下のソースコードをJavascriptファイルに記述するか、<script></script>タグでHTMLに埋め込みます。jQueryライブラリより後に読み込むようにしないと動きません。});});ツールチップを表示したい要素に専用の属性値を付与CSS、Javascriptを記述したら準備はOKです。ツールチップを表示したい要素に「rel=”tooltip”」の属性値を加えます。すると、その要素の「title」属性に記述された文字がツールチップで表示されるようになります。rel="tooltip">ツールチップの例</a>要素にツールチップ用の属性を追加するjQueryコードおまけでこのツールチップ用の属性をjQueryで追加するソースコードを載せておきます。CMSやブログサービス等を使っていて、コアファイルを弄らないと属性の追加が出来ない場合はこちらのソースコードで対応出来ます。a」の部分に設定したい要素を指定し、4行目のtitleの値を任意の文字に変更します。このソースコードはjQueryライブラリより後、ツールチップのソースコードよりも前に記述しないと動かないので注意して下さい。2014年10月16日追記:Twitterでご指摘をいただきました。11どうやらmouseenterやmouseleaveはスマホでうまく動作しないようです。iPhoneでしか確認せずに”スマホサイト”と書いてしまいました、勉強不足を痛感しています。タイトルから”スマホサイト”の文字を削除しました。調べたところ、タッチ操作ではtouchleaveやtouchmoveといったイベントがあるようです。W3G)また、同じくこのプラグインを紹介している記事で言及されていることを引用します。PCサイトでマウスを乗せたらツールチップが出て、クリックするとリンクに飛ぶ、という箇所は、スマフォではタップすると先にツールチップが出てそのまま止まります。リンク先に飛ぶにはもう一度タップしなくてはなりません。ユーザーに「なぜリンク先に行かないの?」と思われてしまう可能性もあります。ちびと.netリンクにツールチップを付けてしまうと2回タップする必要が出てくるんですね。タップしてくれたのに「1回でリンク先に飛ばない」という通常ではない挙動のせいでページ移動を諦めてしまう可能性があります。リンクではなく補助機能として本当に説明が必要な箇所に付けたほうが良さそうです。この指摘がなければ勘違いしたままでした。ありがとうございました。MarkRyoichi(しつ)除菌ティッシュを買い込んで使いきれずによく乾かす人。療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。Log検索:検索カテゴリーCSSHTMLJavaScriptUnityWebサービスWordPressデザイン。