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
     12
3456789
10111213141516
17181920 212223
24252627282930
31      

Viernes 21 de Marzo 2025
Semana 12



Java script - Java


-Input type submit con evento onclick
-Maneras de salir de un iframe con java script
-Sintaxis de un list array en java
-Consumir un JSON desde PHP
-Producir JSON desde PHP
-Menu desplegable en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Funcion ajax en jQuery
-JSON en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Ajax metodo load en jQuery
-Iteracion por los elementos each en jQuery
-Efecto con el metodo toggle en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efectos con los metodos show y hide en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Evento blur en jQuery
-Evento focus en jQuery
-Evento dblclick en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento mousemove en jQuery
-Evento hover en jQuery
-Eventos mouseover y mouseout en jQuery
-Administracion de eventos con jQuery
-Metodos html y html valor en jQuery
-Metodos addClass y removeClass en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos text, text valor en jQuery
-Seleccion de elementos con la clase CSS definida
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos por el tipo de elementos jQ
-Seleccion de un elemento mediante el id jQuery
-Nueva manera de programar JavaScript con jQuery
-Que es el jQuery
-Archivo JavaScript externo
-Propiedad screen del objeto window en java script
-Propiedad location de objeto window en java script
-El objeto window en java script
-Eventos onMouseOver y onMouseOut en java script
-Eventos onFocus y onBlur en java script
-Control TEXTAREA en java script
-Control RADIO en java script
-Control CHECKBOX en java script
-Control SELECT en java script
-Control PASSWORD en java script
-Controles FORM, BUTTON y TEXT en java script
-Formularios y Eventos en java script
-Clase Math en java script
-Clase String en java script
-Clase Array en java script
-Clase Date en java script
-Programacion orientada a objetos en java script
-Funciones que retornan un valor en java script
-Funciones con parametros en java script
-Funciones en java script
-Estructura repetitiva for en java script
-Estructura repetitiva do while en java script
-Concepto de acumulador en java script
-Estructura repetitiva (while) en java script
-Operadores logicos or en las estructuras java s
-Operadores logicos (and) en las estructuras java s
-Estructuras condicionales anidadas en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales simples en java script
-Estructuras secuenciales en java script
-Entrada de datos por teclado en java script
-Variables en java script
-Que es JavaScript
-Lectura y escritura de archivos en java
-Entrada y salida estandar en Java
-Programa para contar vocales de un fichero en java
-Convertidor de divisas en java
-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
..............................................................................................................................................................................................................................................
(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