Javascript 如何向引导缩略图添加工具提示，并在用户单击其他任何位置时使其再次不可见

我有一个如下的缩略图，我正在使用twitter引导

         <script>
 $(document).ready(function(){
   $("#profile-image").popover({ 
     html : true,
     content: function() {
       return $('#popover_content_wrapper').html();
     }
   });
 });

$（文档）.ready（函数（）{
$（“#配置文件图像”）.popover（{
是的，
内容：函数（）{
返回$（'#popover_content_wrapper'）.html（）；
}
});
});

我的要求是，当用户将鼠标悬停在图像上时，将显示一个工具。 我试着用了，但没用。只有当用户单击链接时，工具提示才会不可见。如果工具提示再次变为不可见，那就更好了。也可以向tooltip元素添加div元素

我正在尝试制作类似facebook的个人资料图片

使用-

数据触发器=“悬停”

是的，您可以将

html元素

添加到弹出窗口中

---

当我使用“数据触发器悬停”时，当我将光标移到工具提示上时，弹出框就不可见了。我打算把5个钮扣放在流行音乐里。这就是我使用数据触发器的原因：单击使popover文件变得不可复制。那么你到底想显示什么？我编辑了我的html。我添加了我的视图，我想要facebook视图。我编辑了我的html。我添加了我的视图，如果可能的话，我想要facebook视图。我正在努力的是，当我们将鼠标悬停在popover上时，它是可见的，但当我将光标移到工具提示上时，工具提示就不可见了。：（现在请检查JSFIDLE。）

  <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>

$(function ()  
{ $("#hover").popover({trigger: 'hover'});  
});