$('.masterTooltip').hover(function() {
// hover over code.
var title = $(this).attr('data-submenu');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title).appendTo('body');
var x = $(this).offset();
var w = $('#collapsed-menu').width();
$('.tooltip').css({ top: x.top + 'px', left: w + 'px' }).show();
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
});
<a>
$('#menuMain-ul').on('mouseenter', '.masterTooltip', function() {
});
mouseenter
Your code is close. The issue is that when using a delegated event handler you can only assign one event handler at a time, so you need to call on()
again for the mouseleave
event. Try this:
$('#menuMain-ul').on('mouseenter', '.masterTooltip', function() {
var $el = $(this);
var title = $el.data('submenu');
$el.data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title).appendTo('body').css({
top: $el.offset().top,
left: $('#collapsed-menu').width()
}).show();
}).on('mouseleave', '.masterTooltip', function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
});
Also note that I amended the logic slightly to follow best practices.