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