jquery receives empty values (from div tags) on mouseover event

Question

I am trying to use pnoty jquery library for my own purposes. When user mouse over a term, I paln to retrieve the term name and the description from an xml file and displaying them in the tooltip. I am able to retrieve the term data successfully but I have problems transfering them to the jquery function (I always got empty values in jquery). I think jquery is loaded when the page is loaded, and therefore, sets the fields as empty.

As you see in the a href code below, I have my own function called DisplayAlert, which works perfectly and loads the term-related values to the term name and definition div tags.

<a href="#" onmouseover="javascript:DisplayAlert('qrCode');tooltip.pnotify_display();" onmousemove="tooltip.css({'top': event.clientY+12, 'left': event.clientX+12});" onmouseout="tooltip.pnotify_remove();">EWOM</a>

Then, tooltip.pnotify_display() fn called in the a href above, I call the jquery function as shown below. The problem is that $("#term").text() and $("#definition").text() always return empty values.

       <script type="text/javascript">              
            var permanotice, tooltip, _alert;
            $(function(){                   
                //$.pnotify.defaults.styling = "bootstrap3";            
                // This notice is used as a tooltip.
                var make_tooltip = function(){
                    alert(document.getElementById("term").innerHTML);//alert("test1");
                    tooltip = $.pnotify({
                        title: $("#term").text(),
                        text: $("#definition").text(),
                        hide: false,
                        closer: false,
                        sticker: false,
                        history: false,
                        animate_speed: 100,
                        opacity: 1,
                        icon: "ui-icon ui-icon-comment",
                        // Setting stack to false causes PNotify to ignore this notice when positioning.
                        stack: false,
                        after_init: function(pnotify){
                            // Remove the notice if the user mouses over it.

                            pnotify.mouseout(function(){
                                pnotify.pnotify_remove();
                            });
                        },
                        before_open: function(pnotify){
                            // This prevents the notice from displaying when it's created.
                            pnotify.pnotify({
                                before_open: null
                            });

                            return false;
                        }
                    });
                }
                // I put it in a function so I could show the source easily.
                make_tooltip();         
            }); 

        </script>

I worked hard on this but could not figure out. Any suggestions?

Answer 1

Just so you're sure the functions are firing in the right order, I'd recommend binding the hover and mouseout events in your document.ready function like below:

$(function() {
  $("#hoverLink").hover(function() {
    DisplayAlert('qrcode');
    tooltip.pnotify.display();
    //do all your hover stuff here
  }, function() {
    tooltip.pnotify.remove();
    // do all your mouseout stuff here
  }).on("mousemove", function(e) {
    tooltip.css({'top': e.clientY+12, 'left': e.clientX+12});
  });
});

Something like that. I think this would more clearly seperate your logic from your rendering and make it easier to test and debug (you can do console logs and stuff to see exactly what's happening)