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?