jquery CSS crée un exemple d'info-bulle d'invite de titre de balise personnalisée

Utilisez un simple CSS jquery pour créer une invite de titre de balise personnalisée afin de remplacer le comportement par défaut du navigateur. Comme le montre l'image :



Code Javascript

Le code est le suivant :

$(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(); } 
); 
}); 
});

N'oubliez pas de citer JQuery.

Le setTimeout(function () { pop.remove(); }, pop.text().length*80); dans le code calcule le temps d'invite en fonction de la longueur du titre pour éviter les invites de titre trop courtes. . Une invite de titre longue ou trop longue est trop courte.

Code CSS

Le code est le suivant :

#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; 
}

Utilisez certaines fonctionnalités CSS3 et évitez d'utiliser des images.

Je ne suis pas un expert CSS, il m'a donc fallu un certain temps pour ajuster ce style. Si quelqu'un peut l'utiliser, ce serait mon honneur. :)

Pour plus de création CSS jquery d'exemples d'info-bulles d'invite de titre de balise personnalisées et d'articles connexes, veuillez faire attention au site Web PHP chinois !