How to manually hook up behaviours

Hi All

I've created a really simple page whereby when the user hovers over a form element, a floating tooltip appears that follows the mouse.  It's basic, but it works (please see attachment).

In the code, JQuery is using the .hover method to hook up the behaviour of the floating element.  What I'd like to do if possible is manually set the behaviour for specific elements on the page, to save on repeating my logic for each element that needs a tool tip.

So, near the end of the <script> tag I'd like to do something like this:

function CreateTooltip(elementId, tipText) { ... }

Open in new window


then just afterwards do

CreateTooltip('txt', 'Here is the tooltip text');

Open in new window


Can anyone help me re-shape my logic to allow that level of control??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Test</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<style type="text/css">
		.tooltip{display:none; position: absolute; top: 0; left: 0; z-index: 3; display: none; background-color:#eeeeee; padding:5px; border:1px solid gray}
	</style>
	<script type="text/javascript">
		//<![CDATA[

		$(document).ready(function () {

			// create element to use for tooltips
			var tipdiv = $('<div id="tipdiv" class="tooltip" />');
			tipdiv.append('Hello World!');
			$('body').append(tipdiv);

			$('#txt').hover(
				function () {
					$("#tipdiv").fadeIn(100);
					$("*").mousemove(function (e) {
						$("#tipdiv").css({ 'margin-left': e.pageX + 10, 'margin-top': e.pageY + 10, 'z-index': '999' });
					});
				},
				function () {
					$('#tipdiv').fadeOut(100);
				}
			);

		});
		//]]>
	</script>
</head>
<body>
	<form action="#" method="post">
		<p>
			<input type="text" id="txt" />
		</p>
	</form>
</body>
</html>

Open in new window

LVL 25
RouchieAsked:
Who is Participating?
 
Greg AlexanderLead DeveloperCommented:
OK try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
        <title>Test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <style type="text/css">
                .tooltip{display:none; position: absolute; top: 0; left: 0; z-index: 3; display: none; background-color:#eeeeee; padding:5px; border:1px solid gray}
        </style>
        <script type="text/javascript">
		//<![CDATA[
			function CreateTooltip(elementId, tipText){
				var tipdiv = $('<div id="'+elementId+'_tipdiv" class="tooltip" />');
				$('body').append(tipdiv);
				tipdiv.html(tipText);
				
				$("#"+elementId).hover(function(){
					$("#"+elementId+"_tipdiv").fadeIn(100);
					$("*").mousemove(function (e) {
                    	tipdiv.css({ 
							'margin-left': e.pageX + 10, 
							'margin-top': e.pageY + 10, 
							'z-index': '999' 
						});
                     });
				},
				function () {
						tipdiv.fadeOut(100);
				});
			}

            $(document).ready(function () {
				 CreateTooltip('txt','Some text');
				 CreateTooltip('another','More Text');
				 CreateTooltip('last','Last item text');
			});   
                //]]>
        </script>
</head>
<body>
        <form action="#" method="post">
                <p><input type="text" id="txt" /></p>
                <p><input type="text" id="another" /></p>
                <p><input type="text" id="last" /></p>
        </form>
</body>
</html>

Open in new window

0
 
Greg AlexanderLead DeveloperCommented:
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
        <title>Test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <style type="text/css">
                .tooltip{display:none; position: absolute; top: 0; left: 0; z-index: 3; display: none; background-color:#eeeeee; padding:5px; border:1px solid gray}
        </style>
        <script type="text/javascript">
                //<![CDATA[

                $(document).ready(function () {
					 var tipdiv = $('<div id="tipdiv" class="tooltip" />');
					 $('body').append(tipdiv);
				
					$(".tip").each(function(){
						
						 $(this).hover(
                                function () {
                                        $("#tipdiv").fadeIn(100);
                                        $("*").mousemove(function (e) {
                                         $("#tipdiv").css({ 'margin-left': e.pageX + 10, 'margin-top': e.pageY + 10, 'z-index': '999' });
										  tipdiv.html($(this).attr('alt'));
                                        });
                                },
                                function () {
                                        $('#tipdiv').fadeOut(100);
                                }
                        );
					});
				
                });
                //]]>
        </script>
</head>
<body>
        <form action="#" method="post">
                <p>
                        <input type="text" class="tip" id="txt" alt="Here is the first message"/>
                </p>
                <p>
                        <input type="text" class="tip" id="another" alt="Here is a tip message" />
                </p>
                <p>
                        <input type="text" class="tip" id="last" alt="I can keep going" />
                </p>
        </form>
</body>
</html>

Open in new window

0
 
RouchieAuthor Commented:
Hi galexander07

Thanks for your prompt reply.  That's very nearly what I need, apart from that I need to hook up the tooltips to the elements manually by a function call.  This is for two reasons...

1) Other elements in the page use TITLE for accessibility and shouldn't have a floating tooltip
2) ASP.NET Ajax 'unhooks' events on partial page postbacks, so it tends to break!

Therefore if possible to overcome these drawbacks I'd like to leave the elements as they appear, e.g.

<p><input type="text" id="txt" /></p>
<p><input type="text" id="another" /></p>
<p><input type="text" id="last" /></p>

Open in new window


Then in javascript wire it up with something like this...

CreateTooltip('txt', 'Here is the tooltip text');
CreateTooltip('another', 'Here is more');
CreateTooltip('last', 'And even more');

Open in new window


Is that possible to do?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
RouchieAuthor Commented:
Exactly what I needed - great work, thanks!
0
 
RouchieAuthor Commented:
Actually please can I just check one thing.  If I mouse over all the form elements (one after the other, does that mean that in reality, three <div>s are getting created?  Do they get removed from the DOM on hover out??
0
 
RouchieAuthor Commented:
Not sure if you're available today, so I reposted my query here http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_27036277.html

Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.