JS/Jqueryでブートストラップポップオーバーの幅を広げる

Question

幅を広げて、ページがロードされたときに表示されるブートストラップポップオーバーにカスタムポジショニングを追加しようとしています。 、私は

<script> 
 
\t $('#updatePopover').popover({ 
 
    \t 'placement':'bottom', 
 
\t 'width':'200px', 
 
\t 'top' : '25opx', 
 
\t 'html':'true', 
 
\t 'title':'While you were gone...', 
 
    \t 'content':'Look at me!<br>5 New <strong>Notifications</strong>' 
 
}).popover('show'); 
 
</script>

<li class="dropdown"> 
 
      <a id="updatePopover" href="#" class="dropdown-toggle custom-dropdown-toggle" data-toggle="collapse" data-target="#div-header-submenu" role="button" aria-haspopup="true" aria-expanded="false"><img alt = "" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"/> <span class="caret"></span></a>

何が起こっていることは、すべての属性が正常に動作していることである...これを達成するために、次のJS/jQueryのコードを使用していますが、それはポップオーバーの幅を変更していませんそれはポジションに影響を与えません。また、数秒後に私がどのようにそれを隠すことができるかについての助けは素晴らしいでしょう。私は既にポップオーバーを隠す研究をしましたが、この特定の状況には当てはまりません。

ありがとうございました！

Answer 1

あなたがのために行くされている正確な効果のわからない、しかし、あなたは「show.bs.popover」イベントにカスタムクラスを挿入して、以下に示すように、そのカスタムクラスのCSSを追加することができます。

var PO = $('#updatePopover').popover({ 
 
    'placement': 'bottom', 
 
    'html': 'true', 
 
    'title': 'While you were gone...', 
 
    'content': 'Look at me!<br>5 New <strong>Notifications</strong><br><em>and 300px width...</em>' 
 
}).on("show.bs.popover", function() { 
 
    $(this).data("bs.popover").tip().addClass("my-popover"); 
 
}); 
 

 
PO.popover('show');

body { 
 
    padding: 10px; 
 
} 
 
li { 
 
    list-style: none 
 
} 
 
a:hover { 
 
    text-decoration: none !important; 
 
} 
 
.img-profile-pic { 
 
    width: 30px; 
 
    height: 30px; 
 
} 
 
.popover.my-popover { 
 
    width: 300px !important; 
 
    margin-top: 20px !important; 
 
} 
 
.popover.my-popover .arrow { 
 
    left: 8.8% !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<li class="dropdown"> 
 
    <a id="updatePopover" href="#" class="dropdown-toggle custom-dropdown-toggle" data-toggle="collapse" data-target="#div-header-submenu" role="button" aria-haspopup="true" aria-expanded="false"> 
 
    <img alt="" class="img-profile-pic img-circle" src="https://getmdl.io/templates/dashboard/images/user.jpg" /> <span class="caret"></span> 
 
    </a> 
 
</li>