Saetl.net

Simple And Easy TempLate

Sexy Tooltipsの使い方

  1. 下記ページの 「Download the Sexy Tootips Source Files」の「css-tooltips」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--css部分を外部化したファイル-->
    <link rel="stylesheet" type="text/css" href="css/Sexy Tooltips.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: 400px;
    	margin: 50px auto;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからSexy Tooltipsの設定*/
    .tooltip {
    	border-bottom: 1px dotted #000000;
    	color: #000000;
    	outline: none;
    	cursor: help;
    	text-decoration: none;
    	position: relative;
    }
    .tooltip span {
    	margin-left: -999em;
    	position: absolute;
    }
    .tooltip:hover span {
    	border-radius: 5px 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    	position: absolute;
    	left: 1em;
    	top: 2em;
    	z-index: 99;
    	margin-left: 0;
    	width: 250px;
    }
    .tooltip:hover img {
    	border: 0;
    	margin: -10px 0 0 -55px;
    	float: left;
    	position: absolute;
    }
    .tooltip:hover em {
    	font-family: Candara, Tahoma, Geneva, sans-serif;
    	font-size: 1em;
    	font-weight: bold;
    	display: block;
    	padding: 0.2em 0 0.6em 0;
    }
    .classic {
    	padding: 0.8em 1em;
    }
    .custom {
    	padding: 0.5em 0.8em 0.8em 2em;
    }
    * html a:hover {
    	background: transparent;
    }
    .classic {
    	background: #FFFFAA;
    	border: 1px solid #FFAD33;
    }
    .critical {
    	background: #FFCCAA;
    	border: 1px solid #FF3334;
    }
    .help {
    	background: #9FDAEE;
    	border: 1px solid #2BB0D7;
    }
    .info {
    	background: #9FDAEE;
    	border: 1px solid #2BB0D7;
    }
    .warning {
    	background: #FFFFAA;
    	border: 1px solid #FFAD33;
    }
    
    ・<body></body>内にコードを記述
     <a class="tooltip" href="#">Classic<span class="classic">既定表示</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Critical<span class="custom critical"><img src="images/Critical.png" alt="Error" height="48" width="48" /><em>バツ表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Help<span class="custom help"><img src="images/Help.png" alt="Help" height="48" width="48" /><em>クエスチョンマーク表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Information<span class="custom info"><img src="images/Info.png" alt="Information" height="48" width="48" /><em>情報表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Warning<span class="custom warning"><img src="images/Warning.png" alt="Warning" height="48" width="48" /><em>警告表示</em>テキストテキストテキスト</span></a>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>Sexy Tooltips</title>
    <link rel="stylesheet" type="text/css" href="css/Sexy Tooltips.css" />
    </head>
    
    <body>
    <div id="container"> <a class="tooltip" href="#">Classic<span class="classic">既定表示</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Critical<span class="custom critical"><img src="images/Critical.png" alt="Error" height="48" width="48" /><em>バツ表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Help<span class="custom help"><img src="images/Help.png" alt="Help" height="48" width="48" /><em>クエスチョンマーク表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Information<span class="custom info"><img src="images/Info.png" alt="Information" height="48" width="48" /><em>情報表示</em>テキストテキストテキスト</span></a>&nbsp;&nbsp;&nbsp; <a class="tooltip" href="#">Warning<span class="custom warning"><img src="images/Warning.png" alt="Warning" height="48" width="48" /><em>警告表示</em>テキストテキストテキスト</span></a> </div>
    
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル