Temas > Programacion > Java script - Java > Mostrar un tooltip con datos recuperados en jQuery
Julio

Mostrar un tooltip con datos recuperados del servidor 
en forma a sincrónica
Implementaremos un problema utilizando todos los 
conceptos aprendidos hasta ahora.
Implementar un Tooltip con jQuery recuperando la 
información a mostrar del servidor en forma asincrónica.
Agregar una imagen al tooltip. En el servidor ya hay cuatro 
imágenes llamadas imagen1.jpg, imagen2.jpg etc. y se 
encuentran en el directorio inmediatamente superior a 
donde se almacenan las páginas. ( <img src="../imagen1.jpg"> )
pagina1.html
<?php //esto no va
 <html>
 <head>
 <title>Problema</title>
 <link rel="StyleSheet" href="estilos.css" type="text/css">
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript" src="funciones.js"></script>
 </head>
 <body>
 <p>Entre con el mouse al recuadro.</p>
 <div class="cuadradito" id="c1"></div>
 <div class="cuadradito" id="c2"></div>
 <div class="cuadradito" id="c3"></div>
 <div class="cuadradito" id="c4"></div>
 </body>
 </html>
?>//esto no va
estilos.css
<?php //esto no va
 .cuadradito{
   background-color: #f00;
   height: 50px;
   width: 50px;
   margin:3px;
   z-index: -1;
 }
 #divmensaje {
   background-color: yellow;
    position: absolute;
    padding: 5px;
    width:250px;
    left:120px;
    top:100px;
   z-index: 100;
 }
?>//esto no va
funciones.js
<?php //esto no va
 $(document).ready(function () {
   $("body").append(`<div id="divmensaje">hhhh</div>`);
   $("#divmensaje").hide();
   $(".cuadradito").hover(function (e) {
     $("#divmensaje").show();
     $
 ("#divmensaje").css("left",e.clientX+document.body.scrollLeft+
 5);
     $
 ("#divmensaje").css("top",e.clientY+document.body.scrollTop+5)
 ;
     $("#divmensaje").load("pagina1.php?cod="+$
 (this).attr(`id`));
   },
   function () {
     $("#divmensaje").hide();
   })
   $(".cuadradito").mousemove(function (e){
     $
 ("#divmensaje").css("left",e.clientX+document.body.scrollLeft+
 5);
     $
 ("#divmensaje").css("top",e.clientY+document.body.scrollTop+5)
 ;
   })
 })
?>//esto no va?>//esto no va
pagina1.php
 <?php
 if ($_REQUEST[`cod`]==`c1`)
 {
   echo "<img src="../imagen1.jpg">";
   echo "<p>Primer tooltip.</p>";
   echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa
 aaaaaaaaaa";
   echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa
 aaaaaaaaaaaaaaaa";
   echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa
 aaaaaaa";
    echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa
 aaaaaaaaaa";
    echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa
 aaaaaaaaaaaaaaaa</p>";
 }
 if ($_REQUEST[`cod`]==`c2`)
 {
    echo "<img src="../imagen2.jpg">";
    echo "<p>Segundo tooltip.</p>";
    echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb
 bbbbbbbbbbb bb";
    echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb
 bbbbbbbbbbb bbb</p>";
 }
 if ($_REQUEST[`cod`]==`c3`)
 {
    echo "<img src="../imagen3.jpg">";
    echo "<p>Tercer tooltip.</p>";
 }
 if ($_REQUEST[`cod`]==`c4`)
 {
    echo "<img src="../imagen4.jpg">";
    echo "<p>Cuarto tooltip.</p>";
 }
 ?>
Como podemos ver el código JavaScript utilizando la 
librería jQuery queda muy compacto y reducido:
<?php //esto no va
$(document).ready(function () {
   $("body").append(`<div id="divmensaje">hhhh</div>`);
   $("#divmensaje").hide();
   $(".cuadradito").hover(function (e) {
      $("#divmensaje").show();
      $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
      $("#divmensaje").css("top",e.clientY+document.body.scrollTop+5);
      $("#divmensaje").load("pagina1.php?cod="+$(this).attr(`id`));
   },
   function () {
      $("#divmensaje").hide();
   })
   $(".cuadradito").mousemove(function (e){
      $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
      $("#divmensaje").css("top",e.clientY+document.body.scrollTop+5);
   })
})
?>//esto no va













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar