Jimdoでツールチップを使いたい

あまり使う用途のない機能だとは思いますが・・・

ツールチップって何?

Wikipediaなどではおなじみですが、会社のホームページなどでツールチップを使っているところは意外と少ないと思います。ただ、技術系のホームページなどでは専門用語を使うことも多く、そのたびに注釈をコメントで入れると文章が複雑でかえって読みづらくなることもあります。そんな時にツールチップを使用して専門用語を補足させることが出来れば、本文をすっきり読みやすくすることが出来ます。覚えておくと良い仕組みかもしれませんね。

スタイルシート

<style type="text/css">


    span[data-tip]{

        color:#00F;

        text-decoration:underline;

        position:relative;

        cursor:pointer;

    }

    

    span[data-tip]:hover::after{

        content: attr(data-tip);

        background:#FFC;

        padding:10px;

        font-size:50%;

        border:1px solid #ccc;

        border-radius:6px;

        min-width:200px;

        max-width:300px;

        position:absolute;

        top:26px;

        left:0px;

        line-height:1.2;

        color:#000;

        font-weight:bold;

    }

</style>

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

ツールチップの設置方法HTML

ツールチップって何?

<p><span data-tip="マウスカーソルを当てた時に表示される補足説明のこと">ツールチップ</span>って何?</p>

このように、ツールチップを表示させたい文字を、spanタグで囲み、data-tip=の後に補足説明を書いて「"」ダブルコーテーションで囲みます。


deta-tipHTML5で用意された独自データ属性と呼ばれるもので、data-*の形で表現します。今回は詳細の意味でtooltipのtipを使用しましたが、*に使用される文字についてはASCII小文字であればなんでもありです。


この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422