Erhöhen Sie die Breite des Bootstrap-Popover mit JS/Jquery

Question

Ich versuche, die Breite zu erhöhen und benutzerdefinierte Positionierung zu einem Bootstrap-Popover hinzuzufügen, die angezeigt wird, wenn eine Seite geladen wird. Ich bin mit dem folgenden JS/jQuery-Code dieses ...

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

zu erreichen Was geschieht, ist, dass alle Attribute arbeiten gut, aber es ist nicht die Breite eines der popover ändern, noch beeinflusst es die Position. Auch jede Hilfe, wie ich sie nach ein paar Sekunden verstecken kann, wäre großartig. Ich habe bereits einige Nachforschungen angestellt, um das Popover zu verstecken, aber es trifft nicht auf diese spezielle Situation zu.

danke allen!

Answer 1

Nicht sicher über die genaue Wirkung Sie wollen, aber Sie können eine benutzerdefinierte Klasse auf dem „show.bs.popover“ Ereignis einfügen, und fügen Sie CSS für die benutzerdefinierte Klasse, wie unten dargestellt:

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>