The issue stems from the fact that event handlers added using
$('.masterTooltip').hover(...).mousemove(...)
will only be attached to elements that are present at the time of attachment.
To address this, you could incorporate the same .hover().mousemove() code within your click handler. However, a simpler approach would be to utilize delegated syntax with the .on() method by attaching delegated event handlers to the document, specifying the '.masterTooltip' selector as an argument. This allows jQuery to automatically check if the event pertains to an element matching that selector. The basic usage is shown below:
$(document).on('mouseenter', '.masterTooltip', function() { ... })
For multiple event handlers like mouseenter, mouseleave, and mousemove on the same elements, you can use an object with .on() as demonstrated here:
$(document).on({
'mouseenter': function() {
// Code for mouse enter
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
},
'mouseleave': function() {
// Code for mouse leave
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
},
'mousemove': function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({
top: mousey,
left: mousex
})
}
}, '.masterTooltip'); // Selector specified here
https://jsfiddle.net/c7dw8e28/1/
EDIT, P.S. Note that while the .hover() method you initially used combines mouseenter and mouseleave handlers, when using .on(), you need to define them explicitly as illustrated above.