Showing, Hiding and Positioning jQuery Tooltips

Sponsored links

Site Search

$(document).ready(function() {
var highlighted = "";
// Code continues...
var showTooltip = function(event) {
$('div.tooltip').remove();
var $thisAuthor = $(this).text();
if ($(this).parent().is('.highlight')) {
highlighted = 'un-';
} else {
highlighted = '';
};
$('</p>
<div class="tooltip">Click to '
+ highlighted + 'highlight all articles written by '
+ $thisAuthor + '</div>
').appendTo('body');
positionTooltip(event);
};
};

$(document).ready(function() {
// Code continues...
.click(function(event) {
var thisClicked = $(this).text();
$('table.striped td:nth-child(' + column + ')'
).each(function(index) {
if (thisClicked == $(this).text()) {
$(this).parent().toggleClass('highlight');
} else {
$(this).parent().removeClass('highlight')
};
});
showTooltip.call(this, event);
})
// Code continues...
});

Article Index

Showing, Hiding and Positioning jQuery Tooltips

Now that we have functions for showing, hiding, and positioning the tooltip, we can reference them at the appropriate places in our code:

$(document).ready(function() { 
 
var column = 3; 
 
// Position the tooltip. 
 
var positionTooltip = function(event) { 
 
var tPosX = event.pageX - 5; 
 
var tPosY = event.pageY + 20; 
 
$('div.tooltip').css({top: tPosY, left: tPosX}); 
 
}; 
 
// Show (create) the tooltip. 
 
var showTooltip = function(event) { 
 
$('div.tooltip').remove(); 
 
var $thisAuthor = $(this).text(); 
 
$('</p>
<div class="tooltip">Click to highlight all articles written 
by ' + $thisAuthor + '</div>
').appendTo('body'); 
 
positionTooltip(event); 
 
}; 
 
// Hide (remove) the tooltip. 
 
var hideTooltip = function() { 
 
$('div.tooltip').remove(); 
 
}; 
 
$('table.striped td:nth-child(' + column + ')' ) 
 
.addClass('clickable') 
 
.click(function(event) {
 
var thisClicked = $(this).text(); 
 
$('table.striped td:nth-child(' + column + ')' 
 
).each(function(index) { 
 
if (thisClicked == $(this).text()) { 
 
$(this).parent().toggleClass('highlight'); 
 
} else { 
 
$(this).parent().removeClass('highlight'); 
 
}; 
 
}); 
 
}) 
 
.hover(showTooltip, hideTooltip) 
 
.mousemove(positionTooltip); 
 
})

Note that the .hover() and .mousemove() methods are referencing functions that are defined elsewhere. As such, the functions take no parentheses. Also, because positionTooltip(event) is called inside showTooltip, the tooltip is immediately positioned on hover; it then continues to be referenced as the mouse cursor is moved over the cell due to the function's placement inside the .mousemove() method. The tooltip now looks like this:

Everything works fine now, with a tooltip that appears when we hover over an author cell, moves with the mouse movement, and disappears when we move the mouse cursor out of the cell. The only problem is that the tooltip continues to suggest clicking on a cell to highlight the articles even after those articles have been highlighted:

What we need is a way to change the tooltip if the row has the highlight class. Fortunately, we have the showTooltip function, in which we can place a conditional test to check for the class. If the current cell's parent

Exforsys Offers

Tags