jquery+CSS を使用してカスタムのタグ タイトル プロンプト ツールチップの例を作成する

シンプルな jquery + CSS を使用して、ブラウザのデフォルトの動作を置き換えるカスタマイズされたタグ タイトル プロンプトを作成します。図に示すように:



Javascript コード

コードは次のとおりです:

$(function() { 
$("a[title]").each(function() { 
var a = $(this); 
var title = a.attr('title'); 
if (title == undefined || title == "") return; 
a.data('title', title) 
.removeAttr('title') 
.hover( 
function () { 
var offset = a.offset(); 
$("<p id=\"anchortitlecontainer\"></p>").appendTo($("body")).html(title).css({ top: offset.top + a.outerHeight() + 10, left: offset.left + a.outerWidth() + 1 }).fadeIn(function () { 
var pop = $(this); 
setTimeout(function () { pop.remove(); }, pop.text().length*80); 
}); 
}, 
function() { $("#anchortitlecontainer").remove(); } 
); 
}); 
});

JQuery を忘れずに引用してください。コード内の

setTimeout(function () { Pop.remove(); }, Pop.text().length*80); は、タイトルの長さに基づいてプロンプト時間を計算し、短すぎるタイトル プロンプトが長すぎることを防ぎます。長すぎます タイトルプロンプトが短すぎます。

CSS コード

コードは次のとおりです:

#anchortitlecontainer { 
position: absolute; 
z-index: 5999; 
border: solid 1px #315B6C; 
padding: 5px; 
color: #315B6C; 
background: none repeat scroll 0 0 #FFFFFF; 
border-radius: 5px; 
display: none; 
} 
#anchortitlecontainer:before { 
position: absolute; 
bottom: auto; 
left: -1px; 
top: -15px; 
border-color: transparent transparent transparent #315B6C; 
border-style: solid; 
border-width: 15px; 
content: ""; 
display: block; 
width: 0; 
} 
#anchortitlecontainer:after { 
position: absolute; 
bottom: auto; 
left: 0px; 
top: -13px; 
border-color: transparent transparent transparent #FFFFFF; 
border-style: solid; 
border-width: 15px; 
content: ""; 
display: block; 
width: 0; 
}

いくつかの CSS3 機能を使用し、画像の使用を避けます。

私は CSS の専門家ではないので、このスタイルを調整するのに時間がかかりました。もし誰かがそれを使ってくれたら光栄です。 :)

カスタマイズされたタグ タイトル プロンプト ツールヒントの jquery + CSS 作成の詳細と関連記事については、PHP 中国語 Web サイトに注目してください。