Saetl.net

Simple And Easy TempLate

Easy CSS Tooltipの使い方

  1. 下記ページの 「Download this Script」の「Easy CSS Tooltip」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--css部分を外部化したファイル-->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    

    サンプルのcssコード(サンプルのcssは改変しています)

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    body, ul, li, h1, h2, span {
    	margin: 0;
    	padding: 0;
    }
    body {
    	font: 75% Verdana, Arial;
    	color: #333;
    	background: #fff
    }
    #container {
    	width: 100px;
    	margin: 50px auto;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからEasy CSS Tooltipの設定*/
    a:hover {
    	background: #ffffff;
    	text-decoration: none;
    	cursor: default;
    } /*BG color is a must for IE6*/
    a.tooltip span {
    	display: none;
    	padding: 5px 5px;
    	margin-left: 8px;
    	width: 130px;
    }
    a.tooltip:hover span {
    	display: inline;
    	position: absolute;
    	border: 1px solid #cccccc;
    	background: #ffffff;
    	color: #6c6c6c;
    }
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Easy CSS Tooltip</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    
    <body>
    <div id="container"> Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a> </div>
    
    </body>
    </html>
    
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル