シンプルなjQuery + CSSを使用してカスタムタグタイトルツールチップを作成します

</pre><pre name="code" class="javascript">$(function() {
$("a[タイトル]").each(function() {
var a = $(これ);
var title = a.attr('title');
if (title == undefined || title == "") return;
a.data('タイトル', タイトル)
.removeAttr('タイトル')
.ホバー(
関数 （） {
var オフセット = a.offset();
$("<div id=\"anchortitlecontainer\"></div>").appendTo($("body")).html(title).css({ 上部: offset.top + a.outerHeight() + 10、 左: offset.left + a.outerWidth() + 1 }).fadeIn(function () {
var pop = $(これ);
setTimeout(関数() { pop.remove(); }, pop.text().length*80);
});
},
関数() { $("#anchortitlecontainer").remove(); }
);
});
});

#アンカータイトルコンテナ {
位置: 絶対;
zインデックス: 5999;
境界線: 実線 1px #315B6C;
パディング: 5px;
色: #315B6C;
背景: なし 繰り返しスクロール 0 0 #FFFFFF;
境界線の半径: 5px;
表示: なし;
}
#アンカータイトルコンテナ:前{
位置: 絶対;
下部: 自動;
左: -1px;
上: -15px;
境界線の色: 透明 透明 透明 #315B6C;
境界線のスタイル: solid;
境界線の幅: 15px;
コンテンツ： "";
表示: ブロック;
幅: 0;
}
#アンカータイトルコンテナ:後{
位置: 絶対;
下部: 自動;
左: 0px;
上: -13px;
境界線の色: 透明 透明 透明 #FFFFFF;
境界線のスタイル: solid;
境界線の幅: 15px;
コンテンツ： "";
表示: ブロック;
幅: 0;
}