Now that we have functions for showing, hiding, and positioning the tooltip, we can reference them at the appropriate places in our code:
Sample 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><br>
<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)
})
Copyright exforsys.com
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
has the highlight class, we add un- in front of the word highlight when we create the tooltip:
Sample Code
$(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><br>
<div class="tooltip">Click to '
+ highlighted + 'highlight all articles written by '
+ $thisAuthor + '</div>
').appendTo('body')
positionTooltip(event)
}
}
Copyright exforsys.com
Our tooltip task would now be finished were it not for the need to trigger the tooltip-changing behavior when a cell is clicked as well. For that, we need to call the showTooltip function inside the .click() event handler:
Sample Code
$(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...
})
Copyright exforsys.com
By using the JavaScript call() function, we can invoke showTooltip as if it were defined within the .click() handler. Therefore, this inherits the scope of .click(). Additionally, we pass in event so that we can use its pageX and pageY information for the positioning.
Now the tooltip offers a more intelligent suggestion when the hovered row is already highlighted.
Tutorials 
