Tooltip JQuery لا يعمل كما هو متوقع

Question

فيما يلي رمز JQuery Popup Tooltip عندما أحكم على رابط.

خطأ هو عندما أحكم عليه، فإنه يحدد اللقب لا شيء يظهر أنه سيظهر مرة واحدة ومن ثم لن يأتي أي شيء إذا كنت أتحريك.

عندما أزيل this.title = ""؛ انها تعمل ولكن عنوان الارتباط يأتي aswell

لغة البرمجة

 < 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");
});         

};

Answer 1

سوف ترغب في إجراء فحص إذا كان العنوان فارغا أولا. السبب في ذلك لأنك تعطين عمياء 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");
});