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

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

sponsors

「accesskeyにも対応したツールチップ「NiceTitles」」をシェアする

記事作成:
記事URL:

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