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

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

sponsors

使用方法

以下のコードを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>

サンプル

リンク
Insタグ
<INS>はInsertの略で、<INS>〜</INS>で囲まれた部分が後から追加された部分であることを示します。追加の理由やコメントの文書がある場合には、そのURIをcite属性で指定しますが、内容が簡単な場合にはtitle属性で記述する方法もあります。追加された日時を指定する場合はdatetime属性で指定してください。 
★HTMLタグリファレンスより

sponsors

Javascriptサンプルページ一覧
skuare.net