jQuery Tooltips

Although the row highlighting might be a useful feature, so far it's not apparent to the user that the feature even exists. We can begin to remedy this situation by giving all author cells a clickable class, which will change the cursor to a pointer when a user hovers the mouse cursor over them:

$(document).ready(function() { 
 
$('table.striped td:nth-child(' + column + ')' ) 
 
.addClass('clickable') 
 
.click(function() { 
 
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'); 
 
}; 
 
}); 
 
}) 
 
})  
   

The clickable class is a step in the right direction, for sure, but it still doesn't tell the user what will happen when the cell is clicked. As far as anyone knows (without looking at the code, of course) that clicking could send the user to another page. Some further indication of what will happen upon clicking is in order. Tooltips are a familiar feature of many software applications, including web browsers. We can simulate a tooltip with custom text, such as Click to highlight all rows authored by Rey Bango, when the mouse hovers over one of the author cells. This way, we can alert users to the effect their action will have.

We're going to create three functions—showTooltip, hideTooltip, and positionTooltip—outside any event handlers and then call or reference them as we need them. Let's start with positionTooltip, which we'll reference when the mouse moves over any of the author cells:

var positionTooltip = function(event) { 
 
var tPosX = event.pageX - 5; 
 
var tPosY = event.pageY + 20; 
 
$('div.tooltip').css({top: tPosY, left: tPosX}); 
 
}; 
   

Here we use the pageX and pageY properties of event to set the top and left positions of the tooltip. When we reference the function in the .mousemove() method, tPosX will refer to 5 pixels to the left of the mouse cursor while tPosY will refer to 20 pixels below the cursor. We can attach this method to the same chain as the one being used already for .click():

$(document).ready(function() { 
 
var positionTooltip = function(event) { 
 
var tPosX = event.pageX - 5; 
 
var tPosY = event.pageY + 20; 
 
$('div.tooltip').css({top: tPosY, left: tPosX}); 
 
}; 
 
$('table.striped td:nth-child(' + column + ')' ) 
 
.addClass('clickable')
 
.click(function() { 
 
// ...Code continues... 
 
}) 
 
.mousemove(positionTooltip); 
 
}); 
   

So, we've positioned the tooltip already, but we still haven't created it. That will be done in the showTooltip function.

The first thing that we do in the showTooltip function is remove all tooltips. This may seem counterintuitive, but if we are going to show the tooltip each time the mouse cursor hovers over an author cell; we don't want a proliferation of these tooltips appearing with each new cell hovered over:

var showTooltip = function(event) { 
 
$('div.tooltip').remove(); 
 
}; 
   

Now we're ready to create the tooltip. We can wrap the entire

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'); 
 
}; 
   

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); 
 
}; 
   

.tooltip { 
 
position: absolute; 
 
z-index: 2; 
 
background: #efd; 
 
border: 1px solid #ccc; 
 
padding: 3px; 
 
} 
   

var hideTooltip = function() { 
 
$('div.tooltip').remove(); 
 
};