JQuery Tooltip não funciona como esperado
-
20-09-2019 - |
Pergunta
Aqui está o código do jQuery para um pop -up de dica de ferramenta quando eu mouse sobre um link.
Erro É quando eu passar o mouse sobre ele, ele define o título para nada mostra que ele aparecerá uma vez e, em seguida, nada surgirá se eu estiver pairando sobre ele.
Quando eu removo isso.title = ""; Funciona, mas o título do link também aparece
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");
});
};
Solução
Você deseja executar um cheque se o título está vazio primeiro. A razão é porque você está definindo cegamente o t
variável, não importa o quê e limpeza o título. Experimente isso:
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");
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow