come si aggiunge un'immagine a un suggerimento jquery

Question

Non ho visto questa domanda esatta indirizzata ... se lo è stato, per favore basta indicarmi.

Sto usando il tooltip di jquery. Ho un link che quando lo passi sopra, mi piacerebbe mostrare un'immagine. Niente ha funzionato per me finora.

codice ui nell'intestazione:

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

codice:

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

Ti prego, dimmi che cosa sto facendo male.

Answer 1

provare questo:

Html

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

JQuery

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

Vedere le fiddle lavoro.

Jquery 1.9.1 e JqueryUI 1.9.2 sono inclusi, ovviamente. Controllare se il percorso dell'immagine è corretto a proposito.

Edit: Lei mi ha detto che si sta impostando il legame con jQuery, vedere questo esempio secondo lavoro:

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" />' }); 

}); 

Ecco il nuovo fiddle!

Answer 2

Innanzitutto, manca la citazione di chiusura del tag src. Il codice dovrebbe essere:

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

Inoltre, questo dovrebbe funzionare con il seguente codice come indicato a jQueryUI's website:

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> 

Qui è una demo su jsFiddle: http://jsfiddle.net/QgPEw/1/

Answer 3

Basta passare il contenuto HTML direttamente nel titolo e starai bene.

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

Basta ricordarsi di utilizzare le virgolette singole all'interno titolo.