![](/img/trans.png)
[英]Setting background color when user clicks, changing back when user clicks anywhere else
[英]How to add a tooltip to the bootstrap thumbnail and make it invisible again when the user clicks anywhere else
我有如下缩略图,我正在使用Twitter Bootstrap
<script>
$(document).ready(function(){
$("#profile-image").popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
<div class="span2 pull-left">
<ul class="thumbnails">
<li class="span2">
<a href="#" id="profile-image" class="thumbnail" rel="popover" data-placement= "bottom" data-trigger="click">
<img data-src="holder.js/160x120" src="resources/profile-pics/male/large.jpg" alt="">
</a>
<div id="popover_content_wrapper" style="display: none">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Edit Profile Picture</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="well span5">
</div>
<div class="well span3 pull-right">
</div>
我的要求是,当用户将鼠标悬停在显示工具的图像上时。 我尝试使用http://twitter.github.com/bootstrap/javascript.html#popovers,但是它不起作用。 仅当用户单击链接时,工具提示才不可见。 如果工具提示再次变得不可见,那就更好了。 还可以将div元素添加到工具提示元素。
我正在尝试制作类似Facebook个人资料图片的内容。
用途data-trigger="hover"
是的,您可以将html elements
添加到弹出窗口中。
$(function ()
{ $("#hover").popover({trigger: 'hover'});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.