Как добавить изображение в подсказку jquery

Я не видел, чтобы этот точный вопрос был рассмотрен... если бы это было так, просто укажите мне его.

Я использую jQuery ui tooltip. У меня есть одна ссылка, что, когда вы наводите на нее курсор, я хотел бы показать изображение. До сих пор для меня ничего не работало.

Код ui в заголовке:

<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css'; return false;" />
  <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>)

код:

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

Скажите, пожалуйста, что я делаю неправильно.

Ответ 1

попробуйте следующее:

Html

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

JQuery

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

См. рабочий fiddle.

JQuery 1.9.1 и JqueryUI 1.9.2 включены, конечно. Проверьте, правильно ли ваш путь к изображению.

Изменить: Вы сказали мне, что вы устанавливаете связь с jQuery, см. Второй рабочий пример:

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

});

Вот новый fiddle!

Ответ 2

Во-первых, у вас отсутствует заключительная цитата вашего тега src. Ваш код должен быть:

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

Кроме того, это должно работать со следующим кодом, как показано на jQueryUI сайте:

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>

Вот демонстрация на jsFiddle: http://jsfiddle.net/QgPEw/1/

Ответ 3

Просто передайте содержимое HTML прямо в заголовке, и все будет в порядке.

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

Не забудьте использовать одинарные кавычки внутри заголовка.