0

次のようなサムネイルがあり、twitter ブートストラップを使用しています

         <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のプロフィール画像のようなものを作ろうとしています。

ここに画像の説明を入力ここに画像の説明を入力

4

1 に答える 1

0

使用する - data-trigger="hover"

はい、ポップオーバーに追加できますhtml elements。

ポップオーバーの Jsfiddle ( onhover プロパティ)

$(function ()  
{ $("#hover").popover({trigger: 'hover'});  
});
于 2013-02-19T12:35:29.400 に答える