Jak dodać obraz do podpowiedzi jquery

Question

Nie widziałem tego dokładnego pytania zaadresowanego ... jeśli tak, proszę, proszę, wskazuj mi to.

Używam jquery's ui tooltip. Mam jedno łącze, które po najechaniu myszką chciałbym pokazać obraz. Nic nie zadziałało jak do tej pory.

kod UI w nagłówku:

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

Kod:

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

Proszę mi powiedzieć, co robię źle.

Answer 1

spróbować tego:

Html

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

JQuery

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

Zobacz roboczą fiddle.

Jquery 1.9.1 i JqueryUI 1.9.2 są uwzględniane oczywiście. Sprawdź, czy ścieżka do obrazu jest prawidłowa.

Edit: Mówiłeś, że jesteś ustalaniu powiązań z jQuery, zobacz ten przykład drugi roboczy:

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

}); 

Oto nowy fiddle!

Answer 2

Po pierwsze brakuje wartości zamykającej tagu src. Kod powinien być:

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

Ponadto, powinno to być praca z następującego kodu, jak pokazano na 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> 

Tutaj jest demo na jsFiddle: http://jsfiddle.net/QgPEw/1/

Answer 3

Po prostu prześlij treść HTML bezpośrednio w title, a wszystko będzie dobrze.

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

Wystarczy pamiętać, aby używać apostrofów wewnątrz tytule.