[英]twitter bootstrap tooltip with images
我目前正在使用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>
我試圖用jquery附加一個帶有rel attr的圖像,用於這樣的工具提示:
$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"/></a>');});
沒有圖像,這是有效的,但只要我添加圖像停止工作。
任何想法上面有什么問題?
.append
上的語法已關閉。 嘗試:
$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"></a>');
嗨,好像你已經解決了你的問題。 但我想為您的問題提供不同的解決方案。 我個人使用這種方法向圖像添加工具提示文本。
這是我的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>
如果您想了解有關bootstrap工具提示的更多信息,可以參考這個 。
在我看來最好的方式
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.