asked on

How to create an element once only

The following code creates a floating tooltip when the form elements are hovered over (courtesy of another expert in this TA!). Am I correct in thinking that a new <div> gets appended to the body every time a form item is hovered over?
If so, can the code be streamlined to only create a single <div> for the tooltip, which just gets repositioned and has new html content when other items are hovered over? Or, can the element be removed when hovering out? Not sure which is the best way...!

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

Sudhindra A N

This link may help you..

http://www.switchonthecode.com/tutorials/jquery-custom-tooltips

Lukasz Chmielewski

Yes, for each element there is a tooltip, but you need those - you're referencing the id of the element when showing the tooltip. You could mess with the code to delete the tooltip every time the mouse leaves the element, but why ? Is that a problem ?

Rouchie

ASKER

On some pages there will be a lot of form elements that require a tooltip. I was trying to keep the code running as efficient as possible, so therefore wanted to either remove the tooltip <div>'s, or just have one that provided the tooltip for all form elements.
JQuery isn't my strong point unfortunately so I was hoping somebody could provide me with a solution based on my original code.

Lukasz Chmielewski

I just wonder if adding
tipdiv.remove();
after line 27 (tipdiv.fadeOut(100);) would be enough...

hover has two functions - one fires when the mouse is over, the other when out.

ASKER CERTIFIED SOLUTION

Lukasz Chmielewski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Lukasz Chmielewski

I have added alt attribute to every text field as a tooltip text

SOLUTION

Lukasz Chmielewski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sudhindra A N

Hello,

this code is working...
Just u need to add title attribute to the elements you need tool tip. attribute value will be shown in the tooltip.

<!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; background-color:#eeeeee; padding:5px; border:1px solid gray}
        </style>
        <script type="text/javascript">
                //<![CDATA[

            $(document).ready(function() {
            	
                $("body").append("<div id='ToolTipDiv' class='tooltip'></div>");
                $("[title]").each(function() {
                  $(this).hover(function(e) {
                    $(this).mousemove(function(e) {
                      
                      $("#ToolTipDiv").css({ 
                          'margin-left': e.pageX + 10, 
                          'margin-top': e.pageY + 10, 
                          'z-index': '999',
                          'display':'Block'
                  });
                    });
                    $("#ToolTipDiv")
                      .html($(this).attr('title'))
                      .stop(true,true)
                      .fadeIn("fast");
                    $("#ToolTipDiv").css({ 'display':'none' });
                  }, function() {
                    $("#ToolTipDiv")
                      .stop(true,true)
                      .fadeOut("fast")
                      .css({ 'display':'none' });
                    $(this).attr('ctitle', $("#ToolTipDiv").html());
                  });
                });
            	});
            
            
            
                //]]>
        </script>
</head>
<body>
        <form action="#" method="post">
                <p><input type="text" id="txt" title="First" /></p>
                <p><input type="text" id="another"  title="Second" /></p>
                <p><input type="text" id="last"  title="Third"/></p>
                <a href="#" title="Some text">some link</a>
                <p><input type="text" id="last2" title="My tool tip 1" /></p>
                <p><input type="text" id="last3" title="My tool tip 2" /></p>
                
        </form>
</body>
</html>

Open in new window

Rouchie

ASKER

Thanks for your suggestions. I had seen the approaches whereby ALT and TITLE are used to contain the tips. The problem is that ALT is not a valid property for most items, and I use TITLE elsewhere on my pages for elements that should not have a tool tip. Therefore, its important that I create these tooltips via a function call! Sorry about that...!

Rouchie

ASKER

Just to clarify, where I mention function call, I mean in this manner...

$(document).ready(function () {
       CreateTooltip('txt','Some text');
       CreateTooltip('another','More Text');
       CreateTooltip('last','Last item text');
});

Sudhindra A N

You can change the attribute to anything you need..

may be link change the "title" to "customTitle"... and in javascript code update the title to customTitle at lines 15, 27 and 36.

Rouchie

ASKER

Sorry that's not possible because I'm writing strict xhtml!

SOLUTION

Lukasz Chmielewski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rouchie

ASKER

Okay thanks for that clarification. I've adjusted the logic slightly, so that the tip <div> is created prior to the wiring up of events, and is also not removed after use but just hidden. This code doesn't actually work, although there are no errors so I don't understand why, but is my approach a possibility (fixable)?

<!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; background-color: #eeeeee; padding: 5px; border: 1px solid gray; }
	</style>
	<script type="text/javascript">
		//<![CDATA[
		function CreateTooltip(elementId, tipText) {
			var tipdiv = $('#tipdiv');
			tipdiv.hover(function () {
				tipdiv.html(tipText);
				tipdiv.fadeIn(100);
				$("*").mousemove(function (e) {
					tipdiv.css({
						'margin-left': e.pageX + 10 + 'px',
						'margin-top': e.pageY + 10 + 'px',
						'z-index': '999'
					});
				});
			},
				function () {
					tipdiv.fadeOut(100);
				});
		}

		$(document).ready(function () {
			var tipdiv = $('<div id="tipdiv" class="tooltip" />');
			$('body').append(tipdiv);
			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

Lukasz Chmielewski

This does not do anything because the class tooltip makes it display: none - invisible. So hovering over it does in fact, nothing.