Tutorials jQueryAlthough 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:
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:
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():
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:
Now we're ready to create the tooltip. We can wrap the entire
When the mouse cursor hovers over an author cell with Rey Bango in it, the tooltip will read, Click to highlight all articles written by Rey Bango. Unfortunately, the tooltip will appear at the bottom of the page. That's where the positionTooltip function comes in. We simply place that at the end of the showTooltip function:
The tooltip still won't be positioned correctly, though, unless we free it from its default postion:static property. We can do that in the stylesheet:
The style rule also gives the tooltip a z-index higher than that of the surrounding elements to ensure that it is layered on top of them, as well as sprucing it up with a background color, a border, and some padding.
Finally, we write a simple hideTooltip function:
