Question

我试图增加宽度并向自举弹出窗口添加自定义定位，这会在加载页面时显示。我正在使用以下JS / Jquery代码来实现这一目标......

＆＃13;

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

＆＃13;

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

＆＃13;

发生的事情是所有属性都运行正常，但它不会改变弹出窗口的宽度，也不会影响位置。此外，任何关于如何在几秒钟后隐藏它的帮助都会很棒。我已经做了一些隐藏弹出窗口的研究，但它并不适用于这种特殊情况。

谢谢大家！

Answer 1

不确定您的确切效果，但您可以在＆＃34; show.bs.popover＆＃34;上插入自定义类。 event，并为该自定义类添加css，如下所示：

＆＃13;

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');

＆＃13;

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

＆＃13;

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

＆＃13;

使用JS / Jquery增加bootstrap popover的宽度

1 个答案: