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/easies...w-using-jquery with very simple class="tooltip" title="Web Standards Magazine"

and

the fixed (non-moving) tooltip from http://www.dynamicdrive.com/dynamici...xedtooltip.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

Originally Posted by jscheuer1

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:

Code:

<!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>

Thread: Simple Tooltip Script, Fixed

Thread Tools

Search Thread

Simple Tooltip Script, Fixed

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions