記事内で簡易ツールチップを表示する方法(CSSのみでJavaScript不要)

カーソルをホバーすると簡易説明などをツールチップで表示させる方法です。当サイト作者が作成した次のテンプレートについてです。

概要・デモ表示

  1. こんな感じcustomtemplate ver1.0.0から利用可能だったのに、説明はおろか、作者にすら利用されていない不遇な機能です。で補足説明などを表示できます。

  2. あくまでも簡易ツールチップであるため、凝ったことがしたい場合はjQueryやそのプラグインなどを導入するといいでしょう。

  3. JavaScript未使用です。IE6は非対応で、ホバーしてもツールチップが表示されません。

メリット

  1. 重要度の低い補足説明などを非表示にしておいて、必要な場合のみ読者が表示するようにできます。

  2. 分かっている人には読む部分をできるだけ減らして読みやすくし、必要な人には補足説明をその場で表示できます。どちらの利便性も上がります。

ツールチップを表示するHTMLの記述例

  1. 上記デモ部分のコードは次のとおりです。

    <span class="info">こんな感じ<span>customtemplate ver1.0.0から利用可能だったのに、説明はおろか、作者にすら利用されていない不遇な機能です。</span></span>で補足説明などを表示できます。
  2. それぞれの部分を説明文に入れ替えました。

    最初から見える部分。ホバー後に表示される部分。ツールチップとは関係ない部分。

    <span class="info">最初から見える部分。<span>ホバー後に表示される部分。</span></span>ツールチップとは関係ない部分。

CSSを編集すれば装飾を変更可能

  1. テンプレートのCSS内で次のコードを探します。編集したい部分を調整すれば一括で変更できます。

    /*ツールチップ cf.http://psacake.com/web/jl.asp ie6非対応*/
    .info{position:relative;border-bottom:1px dotted #666;cursor:help;}
    .info:hover{z-index:50;background:#ffe;}
    .info span{display:none;}
    .info:hover span{
    display:block;
    position:absolute;
    top:3em;left:2em;
    width:20em;
    border:1px solid #666;
    background:#eee;color:#222;
    text-align:left;
    padding:5px;
    box-shadow:5px 5px 2px #aaa;
    }
  2. 考案者サイトのPure CSS TooltipsにあるCSSをそのまま使えば、IE5.5でも機能するようです。上記コードは、当テンプレート用にいろいろカスタムした状態です。

  3. ホバーで表示される部分にスタイル   /⌒\
      (;;;______,,,)  このページに
       丿 !    松茸が生えたようです
       (__,,ノ
    を適用できます。その際は、ホバー後に表示される部分の span に直接 style="background:#fcf;" というように追加します。

  4. 推奨はしませんが、クラス skip-on で最初から非表示にし、表示される部分が長い場合はさらに途中から非表示にしておけます。

    長年連れ添った仲の良い老夫婦がいて
    「片方が先に死んだら、さみしくないように壁に埋めよう」
    と言い交わしていた。
    
    しばらくして、婆さんが先に死んだ。
    爺さんは悲しみ、約束通り婆さんの死骸を壁に埋めた。
    すると、ことある事に壁の中から「じいさん、じいさん…」と婆さんの呼ぶ声がする
    爺さんはその声に「はいはい、爺さんはここにいるよ」と答えていたが。
    
    ある日、どうしても用事で出なくてはいけなくなったので
    村の若い男に留守番を頼んだ。
    男が留守番をしていると、壁の中から婆さんの声がする
    「じいさん、じいさん…」
    男は答えた。
    
    「はいはい、じいさんはここにいるよ」
    最初のうちは答えていた。
    けれどしかし、婆さんの声はなんどもなんども呼んでくる。
    
    「じいさん、じいさん…」
    やがて、男は耐えきれなくなって叫んだ。
    
    「うっせえ!じいさんはいねーよ!」
    すると、壁の中から鬼の形相をした老婆が現れ、
    「じいさんはどこだあ!」と叫んだ
    
    すると突然、まばゆいばかりのスポットライトが飛び出したばあさんを映し出す
    
    「JI-I-SA-Nは」「どこだ!」
    
    ステージにばあさんの声が響く
    詰め掛けたオーディエンスはばあさんの久々のステージに期待で爆発しそうだ
    
    今晩も伝説のリリックが聴ける
    ストリート生まれヒップホップ育ち。本物のラップが聴けるのだ
    キャップを斜めに被りオーバーサイズのTシャツをきたじいさんが
    ターンテーブルをいじりながら目でばあさんに合図する
    
    重たいサウンドがスピーカーから響く。ショウの始まりだ
    「ここでTOUJO! わしがONRYO! 鬼のGYOUSO! ばあさんSANJYO!
     違法なMAISO! じいさんTOUSO! 壁からわしが呼ぶGENCHO!
    (ドゥ~ン ドゥンドゥンドゥ~ン キュワキャキャキャッキャキュワキャ!)
    
    年金減少! 医療費上昇! ボケてて大変! 食事の時間!
    冷たい世間を生き抜き! パークゴルフで息抜き!
    どこだJI-I-SA-N 老人MONDAI! そんな毎日リアルなSONZAI! 
    SAY HO!(HO!) SAY HO HO HO HO!」
    
    じいさんのプレイも好調だ。オーディエンスの熱狂はこわいくらいだ
    まだ俺らの時代は始まったばかりだ、そんなメッセージが
    マシンガンのようにばあさんの口から飛び出していく
    本物のヒップホップ。それがここにあるのだ

今後のテンプレート改訂時には

  1. 上記説明やキャプチャー画像と相違があるかもしれません。ご了承願います。

  2. 改訂に伴いこのツールチップは廃止するかもしれません。その際は上記コードを手動で新しいテンプレートにコピペしていただければと思います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)