Quiero hacer un tooltip tipo google con la diferencia de que al poner el cursor encima de una div que contendrá el título de una noticia, en la toolitp, me devuelva algunos datos de la noticia.
Traté con este plug-in
[URL="http://rndnext.blogspot.com/2009/02/jquery-live-and-plugins.html"]http://rndnext.blogspot.com/2009/02/jquery-live-and-plugins.html[/URL] pero no supe como instanciar el código del ajaxhelper.aspx
Soy nuevo en Javascript y por ende en jQuery y Ajax pero, traté con esto.
Código HTML:
<html>
<head>
<style type="text/css">
.pretty-hover2, #usuarios {
background: #FFF;
border: 1px solid #FFF;
width: 250px;
padding: 4px;
display: block;
}
.pretty-hover, #usuarios:hover {
background: #ebf2fc;
border: 1px solid #cddcf9;
background-position:-35px -209px;
cursor: pointer;
}
#tooltip{
position:absolute;
left:0;
top:0;
display: none;
z-index: 20000;
}
</style>
<script src="includes/js/jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
function showNew(str)
{
if(str=="")
{
document.getElementById("NewDiv").innerHTML="";
return;
}
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
} else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("NewDiv").innerHTML = xmlhttp.responseText;
document.getElementById("usuarios").onmouseover = function()
{
$("document").ready(function() {
$("div#usuarios").hover(function() {
$("#JT_arrow_left").css({display: "block"});
$(this).addClass('pretty-hover');
}, function() {
$("#JT_arrow_left").css({display: "none"});
$(this).removeClass('pretty-hover');
$(this).addClass('pretty-hover2');
});
});
}
}
}
xmlhttp.open("GET","getuser.php?n="+str,true);
xmlhttp.send();
}
</script>
</head>
<body> Código PHP:
<?php
$con = mysql_connect("localhost", "root", "123456");
if(!$con) {
die('Could not connect to the DataBase'. mysql_error());
}
mysql_select_db("iGsite", $con);
$query = mysql_query("SELECT * from usuarios LIMIT 5");
while ($row = mysql_fetch_array($query)) {
print '<div id="usuarios">';
print 'Usuario: <a href="" onMouseOver="javascript:showNew('.$row['id'].')">'.$row['usuario'].'</a><br/>';
print 'Nombre: ' .$row['nombre'].'<br/>';
print 'E-mail: ' .$row['email'].'<br/>';
print '</div><br><br>';
}
?>
Código HTML:
<div id="NewDiv"> </div>
<div id="tooltip">blahblahblah <br>blahblahblah<br> blahblahblah<br> blahblahblah <br>blahblahblah blahblahblah blahblahblah <br></div>
</body>
</html>
Si alguien puede ayudarme con la inicialización del archivo ajaxhelper.aspx del vínculo que puse, se lo agradecería o también me gustaría que me dijeran que está mal en mi código. Quizá sea algo del CSS...
De antemano, muchas gracias.