Utilisez un simple CSS jquery pour créer une invite de titre de balise personnalisée tooltip_HTML/Xhtml_web production de page

Introduction

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

Copier le code

code Comme suit :

$(function() { 
$("a[title ]"). each(function() { 
var a = $(this); 
var title = a.attr('title'); 
if (title == non défini || title == "") return ; 
a.data('title', title) 
.removeAttr('title') 
.hover( 
function () { 
var offset = a.offset (); 
$("
").appendTo($("body")).html(title).css({ top: offset.top a.outerHeight( ) 10, gauche : 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

Copier le codeLe code est le suivant :

#anchortitlecontainer {

position : absolue ;
z-index : 5999 ;
bordure : solide 1px #315B6C
remplissage : 5px
couleur : #315B6C ; : aucun répéter scroll 0 0 #FFFFFF;
border-radius: 5px;
affichage: aucun
}
#anchortitlecontainer:before {
position: absolue
bottom: auto; ;
gauche : -1px ;
haut : -15px ;
couleur de la bordure : transparent transparent #315B6C ;
style de bordure : solide
largeur de la bordure : 15px ; content: "";
affichage: bloc;
largeur: 0;
#anchortitlecontainer:after {
position: absolue;
bas: auto; 0px;
top : -13px ;
border-color : transparent transparent transparent #FFFFFF ;
border-width : 15px ; 🎜> 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. :)