infobulle jquery ne fonctionne pas comme prévu
-
20-09-2019 - |
Question
Voici le code jquery pour une fenêtre info-bulle quand je passe la souris sur un lien.
Erreur est quand je passe la souris dessus, il définit le titre à rien montrer, il affichera une fois et rien ne viendra si je re vol stationnaire au-dessus.
Quand je supprimer this.title = ""; cela fonctionne, mais le titre du lien revient aswell
HTML
< a href="#" class="tooltip" title="Name< br>Test">ToolTip< /a>
JQUERY
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
La solution
Vous souhaitez effectuer une vérification si le titre est vide d'abord. La raison pour laquelle est parce que vous configurez aveuglément la variable t
peu importe quoi et le titre de compensation. Essayez ceci:
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$("a.tooltip").hover(function(e){
if(this.t === undefined || this.t.length == 0) {
this.t = this.title;
this.title = "";
}
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
}, function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow