Увеличьте ширину загрузочного popover с помощью JS/JQuery

Question

Я пытаюсь увеличить ширину и добавить настраиваемое позиционирование к загрузочному popover, который появляется при загрузке страницы. Я использую следующий JS/Jquery код для достижения этой цели ...

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

Что происходит, что все атрибуты работают хорошо, но это не изменяя ширину в пирог, и это не влияет на положение. Кроме того, любая помощь в том, как я могу скрыть ее через несколько секунд, будет отличной. Я уже занимался некоторыми исследованиями, скрывая popover, но это не относится к этой конкретной ситуации.

спасибо всем!

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>