Question

This works, but when I hover the first time, nothing loads. When I mouse off then back on, ajax has loaded. I want ajax to load on the first hover.

index.html

<span title="" id="test" class="tooltip"></span>

tooltip.html

<span id="test">this is ajax</span>

jquery

$('.tooltip').hover(function () {
    var id = $(this).attr('id');
    $.get('tooltip.html #'+id, function(data) {
        $('#'+id).attr('title', data);
    });
});

Answer 1

Looks like you are relying on the browser’s inbuilt tooltips (showing the title on hover.) That tooltip is likely triggered by the mouseover event, meaning that after you’ve dynamically added the title, you need another mouseover event to actually trigger the tooltip. Seems it’s working as designed.