1

jQueryでBootstrapプラグインを使用しています。

Bootstrap Popover のホバーのちらつきに問題があります...以下のオプションで試しましたが、問題はまだ存在します

試したオプション:

  1. $('.article-content').popover();
  2. $( document ).ready(function() { $('.article-content2').popover(); });
  3. data-container="body"

HTML

<article>

<span class="article-content" href="#" data-content="Popover with Hover" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Mouse Over</span>        
<span class="article-content2" href="#" data-content="Popover with with Document Ready" rel="popover" data-placement="bottom" data-original-title="Title 2" data-trigger="hover">Mouse Over with Document Ready</span>        
<span class="article-content2" href="#" data-content="Popover with with Document Ready &amp; data-container=body" rel="popover" data-placement="bottom" data-original-title="Title 3" data-trigger="hover" data-container="body">Mouse Over with Document Ready &amp; data-container="body"</span>

</article>

CSS

body{margin:50px;}    
article span{background:#ddd;width:100%;float:left;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:5px;text-align:center;cursor:pointer;margin-bottom:1px;}

jQuery

$('.article-content').popover();

$( document ).ready(function() {
    $('.article-content2').popover();
});

フィドル

@mijopabe のおかげで、" fade " CSS クラスがない場合は追加するだけです。正確な関係はわかりませんが、チャンプのように機能します。

ここにフィドルがあります

ちらつきを除去するために余分に追加される CSS クラス

.fade {
   opacity: 0;
   -webkit-transition: opacity 0s linear;
      -moz-transition: opacity 0s linear;
       -ms-transition: opacity 0s linear;
        -o-transition: opacity 0s linear;
           transition: opacity 0s linear;
 }
4

1 に答える 1