Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How to manually hook up behaviours

Posted on 2011-05-12
6
Medium Priority
?
321 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:Rouchie
  • 4
  • 2
6 Comments
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35748061
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
 
LVL 25

Author Comment

by:Rouchie
ID: 35748217
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
 
LVL 19

Accepted Solution

by:
Greg Alexander earned 2000 total points
ID: 35748814
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Author Closing Comment

by:Rouchie
ID: 35752263
Exactly what I needed - great work, thanks!
0
 
LVL 25

Author Comment

by:Rouchie
ID: 35752274
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
 
LVL 25

Author Comment

by:Rouchie
ID: 35753287
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month11 days, 18 hours left to enroll

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question