comment ajouter une image à une info-bulle jquery

Je n'ai pas vu cette question...s'il a été, juste s'il vous plaît m'indiquer.

J'utilise jquery ui de l'info-bulle. J'ai un lien que quand tu souris, j'aimerais afficher une image. Rien n'a fonctionné pour moi jusqu'à présent.

code de l'interface utilisateur 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/>" });

S'il vous plaît dites-moi ce que je fais mal.

source d'informationauteur LauraNMS

  1. 16

    essayez celui-ci :

    Html

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

    JQuery

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

    Voir le travail violon.

    Jquery 1.9.1 et JqueryUI 1.9.2 sont inclus bien sûr. Vérifiez si votre chemin de l'image est correcte.

    Edit :
    Vous m'avez dit que vous allez sur le lien avec jQuery, voir ce deuxième exemple :

    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 !

  2. 5

    Tout d'abord, il vous manque le cours de clôture de votre src tag. Votre code doit être :

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

    En outre, cela devrait être le travail avec le code suivant comme indiqué sur jQueryUI du site web :

    HTML :

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

    JS : 

    <script>
  $(function() {
    $( document ).tooltip({
      items: "a",
      content: function() {
        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/

  3. 2

    Vient de passer le contenu HTML directement dans titre et vous serez amende.

    <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 à l'intérieur titre.