Ajax调用后未将数据附加到标题标签的操作在第一次悬停时不显示

Question

Hi I have a ajax request that will fetch username, email and user_id. After ajax call success I am appending data using jquery to title tag, main issue I am facing is data getting appended but it is not showing on first attempt, but showing on second time hover.

Here is my code

function showProfile(i)
{
    var user = $("#user_id_"+i).html();
    var business = <?php echo $this->identity()->getBusiness()->getId() ?>;
    $.ajax({
        'url': '/user/account/external/profile',
        'type':'GET',
        'data':{
            businessId:business,
            userId:user,
        },
        'success': function (data) {
            var message = "Fullname : "+data.first_name+" "+data.last_name+" Email : "+data.email;
            $("#user_id_"+i).attr('title',data.first_name+'\n'+data.last_name+'\n' +data.email); 
        },
    });
}

Here is my html code which initiating ajax call

<a id="user_id_btn_'.$k.'" class="user_id_btn" onmouseover="showProfile('.$k.')" onmouseout="hideProfile('.$k.')"><span id="user_id_'.$k.'">'.$iResult[$k][4].'</span></a>

can anybody tell me how to improve this? I want to show data on hover on first attempt only not second.

Answer 1

onmouseover="showProfile('.$k.')" means, that when your mouse moves over this element, the function is called.
So if you would make an ajax request when the mouse hovers, the call starts and the data isn't loaded, when the browser processes the tooltip.
On second hover, the data is written from the first call.
Try to set the tooltip before hovering and then you don't need onmouseover because the tooltip is just shown when hovering ;)