Insertar tooltip jquery en linea php

Jkey · #1 (**permalink**) 18/12/2012, 07:09

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!!

David · #2 (**permalink**) 18/12/2012, 07:27

Solo tienes que agregarle la información data-style-tooltip y data-text-tooltip a tu enlace, como en el ejemplo.

Jkey · #3 (**permalink**) 18/12/2012, 08:55

Cita:

Iniciado por David

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>';} ?>

pateketrueke · #4 (**permalink**) 18/12/2012, 09:26

Revisa el código HTML generado, ¿está todo bien ahí?

Jkey · #5 (**permalink**) 18/12/2012, 10:43

Cita:

Iniciado por pateketrueke

Revisa el código HTML generado, ¿está todo bien ahí?

Que html?

pateketrueke · #6 (**permalink**) 18/12/2012, 10:47

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?

Jkey · #7 (**permalink**) 18/12/2012, 15:46

Cita:

Iniciado por pateketrueke

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

pateketrueke · #8 (**permalink**) 18/12/2012, 15:48

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.

Jkey · #9 (**permalink**) 19/12/2012, 06:42

Cita:

Iniciado por pateketrueke

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!