1

我目前正在使用 twitter bootstrap 添加工具提示。

这是我的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>

我正在尝试使用带有 rel attr 的 jquery 附加图像,以获取如下工具提示:

$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"/></a>');});

没有图像,这可以工作,但是一旦我在其中添加图像,它就会停止工作。

任何想法上面有什么问题?

4

3 回答 3

4

您的语法.append已关闭。尝试:

$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"></a>');

演示:Bootply.com/65857

于 2013-06-27T13:42:57.847 回答
0

您好,看来您的问题已经解决了。但我想为您的问题提供不同的解决方案。我个人使用这种方法将工具提示文本添加到图像中。

这是我的HTML部分。

<a href="#" data-toggle="tooltip" title="Your tool tip text here."><img src="imgs/sample.png"></a>

现在这里是Jquery部分

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(); 
});
</script>

如果您想了解更多有关引导工具提示的信息,可以参考

于 2016-02-10T06:04:41.930 回答
0

在我看来最好的方式

<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>
于 2016-05-17T08:38:05.710 回答