twitter-bootstrap 带有图像的 Twitter 引导工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17344535/
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
twitter bootstrap tooltip with images
提问by danyo
I am currently using twitter bootstrap to add tooltips.
我目前正在使用 twitter bootstrap 添加工具提示。
Heres my JS:
这是我的 JS：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a img").tooltip({'placement': 'right'});
});
</script>
I am trying to append an image with jquery with the rel attr for tooltips like this:
我正在尝试使用 rel attr 附加带有 jquery 的图像以获得如下工具提示：
$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"/></a>');});
Without the image this works, but as soon as i add the image in it stops working.
没有图像这有效，但只要我在其中添加图像就停止工作。
Any ideas what is wrong with the above?
任何想法上面有什么问题？
回答by Zim
The syntax on your .appendis off. Try:
您的语法.append已关闭。尝试：
$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"></a>');
Demo: Bootply.com/65857
回答by Old Ceylon Mudliar
Hi it seem to be you have solved your problem. But I would like to give a different solution for your problem. I personally use this method to add tooltip texts to images.
你好，看来你的问题已经解决了。但我想为您的问题提供不同的解决方案。我个人使用这种方法向图像添加工具提示文本。
Here is my HTMLpart.
这是我的HTML部分。
<a href="#" data-toggle="tooltip" title="Your tool tip text here."><img src="imgs/sample.png"></a>
Now here is the Jquerypart
现在这里是Jquery部分
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
If you want to know more about bootstrap tooltips you could refer this.
如果你想了解更多关于引导工具提示的信息，你可以参考这个。
回答by MRRaja
Best way in my view
在我看来最好的方式
<a href="#" data-toggle="tooltip" data-placement="bottom" title="<img src='../../images/mrraja.jpg' width='105' height='130' />">1</a>
<script>
$(document).ready(function(){
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
html: true
});
});
</script>
