PDA

View Full Version : Simple Tooltip Script, Fixed



andyisan
06-16-2010, 03:13 AM
How can I combine these two scripts:

Example 1 from http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery with very simple class="tooltip" title="Web Standards Magazine"

and

the fixed (non-moving) tooltip from http://www.dynamicdrive.com/dynamicindex5/fixedtooltip.htm

To recap, I'd want a simple tooltip that takes just a small amount of code but is also fixed and doesn't move around as the cursor moves over the same link.

andyisan
07-22-2010, 07:26 PM
Bump?

jscheuer1
07-23-2010, 02:54 AM
I don't think you really want to combine them. You might. But it seems more likely to me that you just want to use the jQuery one and have the option to make its tool tip fixed. Am I right?

andyisan
07-23-2010, 05:30 AM
I don't think you really want to combine them. You might. But it seems more likely to me that you just want to use the jQuery one and have the option to make its tool tip fixed. Am I right?

Yes, combine meant figuratively. I'd want the jQuery one fixed instead of moving with the cursor.

jscheuer1
07-23-2010, 07:11 AM
I kinda cringe at the coding practices used there. So I've rewritten it from the ground up. Here's a demo page:


<!DOCTYPE html>
<html>
<head>
<title>jQuery Fixed Tooltip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#tooltip {
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 2px 5px;
color: #333;
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('body').append('<div id="tooltip"></div>');
var tt = $('#tooltip');
$('a.tooltip').each(function(){
$(this).data('title', this.title).attr('title', '');
}).hover(function(){
var t = $(this), o = t.offset();
tt.html(t.data('title')).css({top: o.top + t.height(), left: o.left}).fadeIn('fast');
},
function(){
tt.css({display: 'none'});
});
});
</script>
</head>
<body>
<h1>jQuery Fixed Tooltip</h1>

<p>Take a trip to <a href="http://www.google.com" class="tooltip" title="Google, the web's most popular Search Engine">Google</a></p>
<p>or <a href="http://www.dynamicdrive.com" class="tooltip" title="DHTML scripts for the real world!">Dynamic Drive</a></p>
</body>
</html>