[JS]HTMLを汚さないで実装できる、シンプルでクールなツールチップのスクリプト -Simpletip
Post on:2009年2月5日
sponsors
ページのあらゆる要素に簡単に実装できる、シンプルでクールなツールチップのスクリプト「Simpletip」を紹介します。
ツールチップのデザインは、スタイルシートで変更できます。
デモのスタイルシート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<textarea name="code" class="css" cols="60" rows="5"> .tooltip{ display: none; position: absolute; padding: 10px 13px; z-index: 2; background-color: #f5f5b5; border: 1px solid #DECA7E; font-size: 12px; line-height: 18px; text-align: center; } </textarea> |
ツールチップを表示したい要素には、非表示の要素やtitleに記述するのではなく、スクリプト内に記述します。
デモのスクリプト
<code class="css">にツールチップを表示。
|
1 2 3 4 5 6 |
<textarea name="code" class="js" cols="60" rows="5"> $('code.css').simpletip({ fixed:false, content:'CSS code example' }); </textarea> |
SimpletipはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors
