accesskeyにも対応したツールチップ「NiceTitles」

リンク先にマウスをのせると説明などが表示されるツールチップ。
これまでにもツールチップをいくつか紹介してきましたが、titleやaltタグが対象になっているケースがほとんどです。
1976design.comのNiceTitlesはaccesskeyやinsタグにも対応しています。
＊ここで使用しているのはNicetitlesではありません。

使用方法
以下のコードをheadに書きます。
<script src="http://yourdomain/nicetitles.js" type="text/javascript"></script>
<style type="text/css">
div.nicetitle {
background-color: #333;
color: #fff;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
left: 0;
padding: 4px;
position: absolute;
top: 0;
width: 25em;
z-index: 20;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 10px;
-moz-opacity: .87;
}
div.nicetitle p {
margin: 0;
padding: 0 3px;
-moz-opacity: 1;
}
div.nicetitle p.destination {
font-size: 9px;
padding-top: 3px;
text-align: left;
-moz-opacity: 1;
}
div.nicetitle p span.accesskey {
color: #d17e62;
}
</style>
あとは、下記の例のようにtitleやaccesskeyを書き込めば完了です。
<a href="http://1976design.com/blog/" accesskey="a" title="Dunstan's blog">リンク</a>
<ins datetime="2007-08-11T19:22:00-00:00">Insタグ</ins>
accesskeyにも対応したツールチップ「NiceTitles」サンプル

2007年10月27日

前の記事：Movable Typeで既存コメントを簡単に引用できるプラグイン「Quote」
次の記事：PhotoShopライクなカラーピッカーjavascript「Photoshop-like JavaScript Color Picker」

関連記事

• amazonライクにぐるぐる回るJavaScript「3D Image Carousel」
• [mootools]MooTips
• [jQuery]clueTip
• [jQuery]jTip
• [jQuery]levTip

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」