I'm trying to create my own tooltip function and, after looking at a
tutorial
of which that is a part, it looks simple enough.
But hacking apart some code and trying to extract the pertinent parts for
my purposes has left me with a non-functional tooltip.
I'm getting a "syntax error" on the 4th line from the bottom in the jQuery
below, but I can't figure out what the error is.
Here's the code I'm trying. suggestions, anyone? Better approach?
Thanks for any feedback!
Rick
HTML:
<body>
<div style="height:100px; width:100px; border:1px solid black;
background-color:red;" class="clickable">
<a href="#" onclick="return false;">Mouseover this text for a
tooltip.</a>
</div>
</body>
CSS:
.tooltip {
position: absolute;
z-index: 2;
background: #efd;
border: 1px solid #ccc;
padding: 3px; }
jQuery:
$(document).ready(function() {
// position the tooltip
var positionToolTip = function(event) {
var tPosX = event.pageX - 5;
var tPosY = event.pageY + 20;
$('div.toolTip').css({ top:tPoxY, left:tPosX });
};
// show (create) the tooltip
var showToolTip = function(event) {
$('div.toolTip').remove();
$('<div class="toolTip">You must have a favorites
account<br>and be logged in to save favorites</div>').appendTo('body');
positionToolTip(event);
};
// hide (remove) the tooltip
var hideToolTip = function() {
$('div.toolTip').remove();
};
$('.clickable').click(function() {
.hover(showToolTip, hideToolTip); <!--- "syntax error" here
.mousemove(positionToolTip);
});
});
----------------------------------------------------------------------------
------------------------------------------
"Ninety percent of the politicians give the other ten percent a bad
reputation." - Henry Kissinger
