Как добавить всплывающую подсказку для начальной загрузки миниатюры и сделать его невидимым еще раз, когда пользователь щелкает где-нибудь еще

Question

У меня есть эскиз, как следует, и я с помощью 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.

Answer 1

Применение - data-trigger="hover"

Да, вы можете добавить html elements в Popovers.

Jsfiddle on popover (onhover property)

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