Foros del Web » Programando para Internet » PHP »

Insertar tooltip jquery en linea php

Estas en el tema de Insertar tooltip jquery en linea php en el foro de PHP en Foros del Web. Hola a todos!! Tengo una web en la que tengo imagenes (juegos flash) y quiero poner un tooltip para cuando pase el cursor por encima ...
  #1 (permalink)  
Antiguo 18/12/2012, 07:09
Avatar de Jkey  
Fecha de Ingreso: julio-2012
Mensajes: 28
Antigüedad: 8 años, 11 meses
Puntos: 0
Pregunta Insertar tooltip jquery en linea php

Hola a todos!!

Tengo una web en la que tengo imagenes (juegos flash) y quiero poner un tooltip para cuando pase el cursor por encima de la imagen salga el tooltip. Probe el tooltip en un documento html y anda sin problemas el problema es que no se como insertarlo ya que el codigo donde carga la imagen es en php:

Código PHP:
echo '<li><a title="'.$featured_game['name'].'" href="'.$featured_game['url'].'"><img  src="'.$featured_game['image_url'].'" height="60" width="60" alt="'.$featured_game['name'].'" /></a></li>';} ?> 
Ese es el codigo, y este es el tooltip que uso:

http://jquery-plugins.net/sweet-tooltip-jquery-and-css3-tooltips

Dejo el codigo de ejemplo que trae:

Código:
<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Sweet Tooltip | Webstuffshare.com</title>
	<meta name="description" content="Tutorial : Sweet Tooltip">
	<meta name="author" content="Webstuffshare">
	<link rel="stylesheet" href="demo.css?v=2">
	<link rel="stylesheet" href="sweet-tooltip.css">
</head>
<body>
	
	<div id="container">
		
		<h2>Sweet Tooltip - one style is not enough</h2>
		
		<div class="item-tooltip">
			<div class="item">
				<span class="top-title">Sweet Strong </span>
				<div class="image-item"><img src="images/sweet-strong.png" /></div>
			</div>
			<div class="item-information">
				<span class="title">Style Name </span>
				<span class="information-content">
					tooltip-sweet-strong
				</span>
				<span class="title">Example </span>
				<span class="information-content">
					Hover <a href="#" class="sweet-tooltip" data-style-tooltip="tooltip-sweet-strong" data-text-tooltip="Howdy, I'm your tooltip :) ">this link</a> to see how this tooltip works
				</span>
			</div>
		</div>
		
	</div>
	
	
	<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
	<script type="text/javascript" src="sweet-tooltip.js"></script>
</body>
</html>

Espero que me puedan ayudar, Muchas gracias!!
  #2 (permalink)  
Antiguo 18/12/2012, 07:27
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 16 años, 3 meses
Puntos: 839
Respuesta: Insertar tooltip jquery en linea php

Solo tienes que agregarle la información data-style-tooltip y data-text-tooltip a tu enlace, como en el ejemplo.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 18/12/2012, 08:55
Avatar de Jkey  
Fecha de Ingreso: julio-2012
Mensajes: 28
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Insertar tooltip jquery en linea php

Cita:
Iniciado por David Ver Mensaje
Solo tienes que agregarle la información data-style-tooltip y data-text-tooltip a tu enlace, como en el ejemplo.
No me queda, asi es como lo deje

Código:
<link rel="stylesheet" type="text/css" href="templates/red/sections/carrusel/css/estylo.css" />
		<link rel="stylesheet" type="text/css" href="templates/red/sections/carrusel/css/gridNavigation.css" />
		<link rel="stylesheet" href="sweet-tooltip.css">
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
		<script type="text/javascript" src="templates/red/sections/carrusel/js/jquery.min.js"></script>
		<script type="text/javascript" src="templates/red/sections/carrusel/js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="templates/red/sections/carrusel/js/jquery.mousewheel.js"></script>
		<script type="text/javascript" src="templates/red/sections/carrusel/js/jquery.gridnav.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#tj_container').gridnav({
				rows        :4,
					type	: {
						
						mode		: 'disperse', 	// use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
						speed		: 500,			// for fade, seqfade, updown, sequpdown, showhide, disperse, rows
						easing		: '',			// for fade, seqfade, updown, sequpdown, showhide, disperse, rows	
						factor		: '',			// for seqfade, sequpdown, rows
						reverse		: ''			// for sequpdown
					}
				});
			});
		</script>
	
		<div class="container">
			
			<div class="content example1">
				<div id="tj_container" class="tj_container">
					
					<div class="tj_wrapper">
						<ul class="tj_gallery">
		
						
						<?php
while($cat_games = mysql_fetch_array($category_games)) {
		$featured_game = GameData($cat_games, 'featured');
		
			$contador++;
			
			if($contador <= 21){
				$pagina=1;
			}
	
	echo '<li><a title="'.$featured_game['name'].'" href="'.$featured_game['url'].'" class="sweet-tooltip" data-style-tooltip="tooltip-sweet-strong" data-text-tooltip="'.$featured_game['name'].'"><img  src="'.$featured_game['image_url'].'" height="60" width="60"  /></a></li>';} ?>
				
					</ul>
					</div>
					<div class="tj_nav">
				
						<span id="tj_prev" class="tj_prev" onclick="javascript: contador()">Previous</span>
						<span id="tj_next" class="tj_next">Next </span>
						
						
					</div>
				</div>
			</div>
			
		</div>

<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
<script type="text/javascript" src="sweet-tooltip.js"></script>

Si le saco la etiqueta title y lo dejo asi tampoco funciona

Código:
echo '<li><a href="'.$featured_game['url'].'" class="sweet-tooltip" data-style-tooltip="tooltip-sweet-strong" data-text-tooltip="'.$featured_game['name'].'"><img  src="'.$featured_game['image_url'].'" height="60" width="60"  /></a></li>';} ?>
  #4 (permalink)  
Antiguo 18/12/2012, 09:26
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 13 años, 3 meses
Puntos: 2534
Respuesta: Insertar tooltip jquery en linea php

Revisa el código HTML generado, ¿está todo bien ahí?
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #5 (permalink)  
Antiguo 18/12/2012, 10:43
Avatar de Jkey  
Fecha de Ingreso: julio-2012
Mensajes: 28
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Insertar tooltip jquery en linea php

Cita:
Iniciado por pateketrueke Ver Mensaje
Revisa el código HTML generado, ¿está todo bien ahí?
Que html?
  #6 (permalink)  
Antiguo 18/12/2012, 10:47
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 13 años, 3 meses
Puntos: 2534
Respuesta: Insertar tooltip jquery en linea php



A ver, cuando un script PHP termina de ser procesado resulta en todo lo que imprimes con el, en tu caso es HTML.

Así pues, hay que darle clic derecho (en tu navegador) a la pagina que estás corrigiendo y ver si en el HTML generado se ven los atributos de HTML con los valores que imprimes.

¿Verdad que si sabes?
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #7 (permalink)  
Antiguo 18/12/2012, 15:46
Avatar de Jkey  
Fecha de Ingreso: julio-2012
Mensajes: 28
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Insertar tooltip jquery en linea php

Cita:
Iniciado por pateketrueke Ver Mensaje


A ver, cuando un script PHP termina de ser procesado resulta en todo lo que imprimes con el, en tu caso es HTML.

Así pues, hay que darle clic derecho (en tu navegador) a la pagina que estás corrigiendo y ver si en el HTML generado se ven los atributos de HTML con los valores que imprimes.

¿Verdad que si sabes?
Si, solo que no aparece
  #8 (permalink)  
Antiguo 18/12/2012, 15:48
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 13 años, 3 meses
Puntos: 2534
Respuesta: Insertar tooltip jquery en linea php

Excelente, ¿es el único dato que no aparece o los demás si?

Por favor no limites tus respuestas, mientras mas abundes en información todo será mas claro.
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #9 (permalink)  
Antiguo 19/12/2012, 06:42
Avatar de Jkey  
Fecha de Ingreso: julio-2012
Mensajes: 28
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Insertar tooltip jquery en linea php

Cita:
Iniciado por pateketrueke Ver Mensaje
Excelente, ¿es el único dato que no aparece o los demás si?

Por favor no limites tus respuestas, mientras mas abundes en información todo será mas claro.
Muchas gracias por todo!! Sabes cual era el problema? Se ve que no cargaba los archivos js, cuando en src le puse la dirección exacta con http:// hay anduvo muchas gracias! saludos!

Etiquetas: html, jquery, tooltip
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:43.