jQuery 툴팁은 예상대로 작동하지 않습니다
-
20-09-2019 - |
문제
다음은 링크 위로 호버링 할 때 툴팁 팝업의 jQuery 코드입니다.
오류 내가 그것을 가리킬 때, 그것은 제목을 한 번 보여줄 것이라는 제목을 설정하고, 내가 그것을 위로 가리면 아무것도 나오지 않을 것입니다.
이 this.title = ""; 작동하지만 링크 제목은 well이 나타납니다
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");
});
};
해결책
제목이 먼저 비어 있는지 확인하는 것이 좋습니다. 그 이유는 당신이 맹목적으로 설정하기 때문입니다 t
제목이 무엇이든간에 변수. 이 시도:
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");
});
제휴하지 않습니다 StackOverflow