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">   </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"> </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.