Question

Hello i am trying to modify the variable popText but failing on the ajax function, i cant get the output on popText 🙁

What am i doing wrong?

function nariTooltip(){

var popTime;
var fading;
var popboxIsActive = false;
var mouseIsHoverPopbox = false;
var popText;

//Using Event Delegation to cover late AJAX inserted DOM elements
//no need to recall function after each AJAX run

//Mouseenter / Mouseout
$("body").on(
    {
        mouseenter: function(e){

                $hoverElem = $(this);

                //Define Variables
                var popDelay = 250;
                    if ($hoverElem.attr("popdelay")){
                        var popDelay = $hoverElem.attr("popdelay");
                    }

                popTime = setTimeout(function() {

                    popText = $hoverElem.attr("poptext");
                        if ($hoverElem.next().hasClass("poptext")) {
                            popText = $hoverElem.next(".poptext").html();
                        }

                    var popAjax = $hoverElem.attr("popajax");
                    if (popAjax){

                        var popAjax = popAjax.split(':');
                        popAjaxType = popAjax[0];

                        if (popAjaxType == 'general')
                            {
                            popAjaxUrl = 'tooltip_gen.php';
                            }
                        else if (popAjaxType == 'item')
                            {
                            popAjaxUrl = 'tooltip_items.php';
                            }


                        if (popAjaxUrl){
                            $.ajax({ url: 'ajax/'+popAjaxUrl,
                            data: {id: popAjax[1]},
                            type: 'get',
                            success: function(output) 
                                {
                                popText = output;
                                },
                            error:function (xhr, ajaxOptions, thrownError){
                                 popText =  html(xhr.statusText);
                                 },
                            });
                            }


                    //alert(outputs);
                    }

                    //Create Popup
                    $hoverElem.append('<div class="popbox">' + popText + '</div>');

popText always end up with the value assigned on popText = $hoverElem.next(".poptext").html();

Answer 1

It seems that you create the div with the text before ajax has returned. Make function that sets the popText and call it when you’ve got it from ajax

function setPopText( elem, txt ) {
    $(elem).append('<div class="popbox">' + txt + '</div>')
}

And in your ajax

success: function ( output ) {
    setPopText( $hoverElem, output );
}