Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: jquery tooltip

  1. #1
    New Coder
    Join Date
    Feb 2008
    Location
    England
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts

    jquery tooltip

    Hi
    I am having so much trouble with my tooltip in jquery, i think im starting to lose the plot! If someone could have a look at it for me and point me in the right direction it would be most appreciated.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
      
             
      $(document).ready(function(){
        
    		$("#tooltip").hide();
    		
    /*    $(".box_button").hover(function () {
          var text = $(this).children(".green").text();
          $("input").val(text);
        });*/
    	
    		$(".box_button").hover(function () {
    			var text = $(this).children(".green").text();
    			$("#tooltip").html(text);
    			$("#tooltip").fadeIn(400);		
    			$().mousemove(function(e){
    				$('#tooltip').html(e.pageX +', '+ e.pageY);
    				$('#tooltip').css("left", e.pageX);
    				$('#tooltip').css("top", e.pageY);
    			});
    			
    /*			var imagediv = $(this);
    			var position = imagediv.position();
    			//$("p:last").text( "left: " + position.left + ", top: " + position.top );
    			$('#tooltip').css("left", (position.left + 100));
    			$('#tooltip').css("top", (position.top + 100));*/
    			
    
    		}, function () {
    			$("#tooltip").hide();
    		});
    		
    		
    
      	});
      
      	</script>
    <style type="text/css">
    button {
    	margin:4px;
    	cursor:pointer;
    }
    input {
    	margin:4px;
    	color:blue;
    }
    #tooltip {
    	height: 100px;
    	width: 100px;
    	background: #fff;
    	position:absolute;
    	padding:15px;
    	border:#999 solid thin;
    
    }
    #tooltip input {
    	border:none;
    	width:auto;
    }
    .green {
    	display:none;
    }
    .box_button {
    	border:thin #000 solid;
    	background:#999;
    	padding:5px;
    }
    #container {
    	width:143px;
    }
    </style>
    
    </head>
    <body>
    <div id="container">
      <div class="box_button">text
        <div class="green">tooltip working</div>
      </div>
      <div class="box_button">text 2
        <div class="green">tooltip working</div>
      </div>
    </div>
    <div id="tooltip"> &nbsp; </div>
    <div id="status">
      <!-- -->
    </div>
    </body>
    </html>
    james

  • #2
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    That should work:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
      	$("#tooltip").hide();
    	$(".box_button").hover(function () {
    	var text = $(this).children(".green").text();
    	$("#tooltip").html(text);
    	$("#tooltip").fadeIn(200);		
    	}, function () {
    		$("#tooltip").hide();
    		});
    });
    </script>
    <style type="text/css">
    button {margin:4px;cursor:pointer;}
    input {margin:4px;color:blue;}
    #tooltip {height:100px;width:100px;background:#fff;position:absolute;padding:15px;border:#999 solid thin;}
    #tooltip input {border:none;width:auto;}
    .green {display:none;}
    .box_button {border:thin #000 solid; background:#999;padding:5px;}
    #container {width:143px;}
    </style>
    </head>
    <body>
    <div id="container">
      <div class="box_button">text 1
          <div class="green">tooltip 1 working</div>
      </div>
      <div class="box_button">text 2
        <div class="green">tooltip 2 working</div>
      </div>
    </div>
    <div id="tooltip">&nbsp;</div>
    <div id="status"><!-- --></div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Feb 2008
    Location
    England
    Posts
    31
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hi sorry i really didnt make it clear. What i want the "status" div position to do is by tracked by the mouse and only appear when you are hovering over the appropriate div.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •