web-dev-qa-db-fra.com

comment ajouter une image à une info-bulle jquery

Je n'ai pas vu cette question exacte adressée ... si elle l'a été, veuillez simplement me l'indiquer.

J'utilise l'infobulle de jquery. J'ai un lien que lorsque vous passez la souris dessus, je voudrais montrer une image. Jusqu'à présent, rien n'a fonctionné pour moi.

code ui dans l'en-tête:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

HTML:

(see <a id='riverroad' href='#' title='' >image of 1 Maple St.</a>)

code:

$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg/>" });

Veuillez me dire ce que je fais mal.

jquerytooltip
13
LauraNMS

essaye celui-là :

Html 

<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>

JQuery 

$( "#riverroad" ).tooltip({ content: '<img src="yourImagePath" />' });

Voir le fonctionnement violon .

Jquery 1.9.1 et JqueryUI 1.9.2 sont bien sûr inclus. Vérifiez si votre chemin d'image est correct en passant.

Edit: Vous m'avez dit que vous établissez le lien avec jQuery, voir ce deuxième exemple de travail:

Html 

<div id="content">    
</div>

JQuery 

$(document).ready(function() {
   $("#content").html('<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>');
   $("#content #riverroad").tooltip({ content: '<img src="http://icdn.pro/images/fr/a/v/avatar-barbe-brun-homme-utilisateur-icone-9665-128.png" />' }); 

});

Voici le nouveau violon !

17
soyuka

Tout d'abord, il manque la citation finale de votre balise src. Votre code doit être:

$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg' />" });

De plus, cela devrait fonctionner avec le code suivant comme indiqué sur site Web de jQueryUI :

HTML:

<a id='riverroad' href='#' title='' >image of 1 Maple St.</a>

JS:

<script>
  $(function() {
    $( document ).tooltip({
      items: "a",
      content: function() {
        var element = $( this );
        if (element.attr('id') === 'riverroad') {
          return "<img class='map' src='./images/myimage.jpg' />";
        }
      }
    });
  });
</script>

Voici une démo sur jsFiddle: http://jsfiddle.net/QgPEw/1/

6
Y__

Passez simplement le contenu HTML directement dans title et tout ira bien.

<a id="riverroad" href="#" title="<img src='http://icdn.pro/images/fr/a/v/avatar-barbe-brun-homme-utilisateur-icone-9665-128.png'" >image of 1 Maple St.</a>

N'oubliez pas d'utiliser des guillemets simples à l'intérieur title.

3
Lucian Minea