...

View Full Version : jquery tooltip



dewy
01-27-2009, 09:58 AM
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.



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

freedom_razor
01-27-2009, 10:58 AM
That should work:


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

dewy
01-27-2009, 11:02 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum