как вы добавляете изображение в подсказку jquery

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

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

UI код в заголовке:

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

код:

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

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

источник

2013-03-07 LauraNMS

Вы не закончили цитирование тега 'src':' "" ' –

после размещения закрывающей цитаты, это сработало? –

Нет, все равно этого не произошло. $ ("#riversroad") .tooltip ({content: ""}); – LauraNMS

попробовать это один:

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 включены, конечно. Проверьте, правильно ли ваш путь к изображению.

Edit: Вы сказали мне, что вы устанавливаете связь с 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!

источник

2013-03-07 15:10:33 soyuka

Все еще ничего, но где я могу поместить этот код? С $ (function() { $ (документ) .tooltip ({ }); }); или с $ (document) .ready (function()? – LauraNMS

Оба должны работать, на скрипке, которую я использовал onLoad. Если вы смотрите исходный код на веб-сайте [jQueryUI API] (http://jqueryui.com/tooltip/) , они делают это в '$ (function() {})'. У вас есть некоторые ошибки в вашей консоли JS? Правильно ли путь к изображению? – soyuka

Я вижу, что это действительно работает! Но я не заметил элемента из моей проблемы. Моя ссылка находится в пределах $ ('# chart'). html ("image of 1 Maple St."); – LauraNMS

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

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

Кроме того, это должно работать со следующим кодом, как показано на 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>

Здесь представляет собой демонстрационную версию jsFiddle: http://jsfiddle.net/QgPEw/1/

источник

2013-03-07 15:01:10

Ничего не происходит, когда я включаю этот код. – LauraNMS

Я исправил свой код, который имел неправильное состояние. Теперь это должно работать лучше, как показано в jsFiddle –

Просто передайте содержимое 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>

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

источник

2016-10-10 06:11:35

как вы добавляете изображение в подсказку jquery

ответ

Смежные вопросы