你如何将图像添加到 jquery 工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15274123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do you add an image to a jquery tooltip
提问by LauraNMS
I haven't seen this exact question addressed...if it has been, just please point me to it.
我还没有看到这个确切的问题被解决……如果已经解决了，请指点我。
I'm using jquery's ui tooltip. I have one link that when you mouseover it, I'd like to show an image. Nothing has worked for me so far.
我正在使用 jquery 的 ui 工具提示。我有一个链接，当你将鼠标悬停在它上面时，我想显示一张图片。到目前为止，没有什么对我有用。
ui code in header:
标题中的 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:
HTML：
(see <a id='riverroad' href='#' title='' >image of 1 Maple St.</a>)
code:
代码：
$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg/>" });
Please tell me what I'm doing wrong.
请告诉我我做错了什么。
回答by soyuka
try this one :
试试这个：
Html
html
<a id="riverroad" href="#" title="" >image of 1 Maple St.</a>
JQuery
查询
$( "#riverroad" ).tooltip({ content: '<img src="yourImagePath" />' });
See the working fiddle.
请参阅工作小提琴。
Jquery 1.9.1 and JqueryUI 1.9.2 are included of course. Check if your image path is correct by the way.
当然包括 Jquery 1.9.1 和 JqueryUI 1.9.2。顺便检查一下你的图片路径是否正确。
Edit : You told me that you're setting the link with jQuery, see this second working example :
编辑：您告诉我您正在使用 jQuery 设置链接，请参阅第二个工作示例：
Html
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" />' });
});
Here is the new fiddle!
这是新的小提琴！
回答by Y__
First, you are missing the closing quote of your srctag. Your code should be :
首先，您缺少src标签的结束语。你的代码应该是：
$( "#riverroad" ).tooltip({ content: "<img src='./images/myimage.jpg' />" });
Moreover, this should be working with the following code as shown on jQueryUI's website:
此外，这应该适用于jQueryUI 网站上显示的以下代码：
HTML :
HTML :
<a id='riverroad' href='#' title='' >image of 1 Maple St.</a>
JS :
JS：
<script>
$(function() {
$( document ).tooltip({
items: "a",
content: function() {
var element = $( this );
if (element.attr('id') === 'riverroad') {
return "<img class='map' src='./images/myimage.jpg' />";
}
}
});
});
</script>
Here is a demo on jsFiddle : http://jsfiddle.net/QgPEw/1/
这是一个关于 jsFiddle 的演示：http: //jsfiddle.net/QgPEw/1/
回答by Lucian Minea
Just pass the HTML content directly in titleand you'll be fine.
只需在标题中直接传递 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>
Just remember to use single quotes inside title.
请记住在title 中使用单引号。
