web-dev-qa-db-fra.com

Popst statique Bootstrap

Dans la documentation de démarrage popover ( http://getbootstrap.com/javascript/#popovers ), ils montrent sur la page que le popover ressemble de manière statique (avant l'exemple où il est connecté aux boutons).

J'aimerais afficher une popover sur ma page pour expliquer quelque chose sur mon site - mais j'aimerais que cette image apparaisse toujours, sans que l'utilisateur n'ait à cliquer.

comment puis-je afficher un popover statique comme ils le font? Impossible de trouver une option.

Merci

csstwitter-bootstraptwitter-bootstrap-3
12
developer82

Si vous examinez le code HTML utilisé par Bootstrap dans leurs exemples, ils ont simplement supprimé la classe fade de l'élément HTML, puis remplacé quelques-uns des styles par défaut.

HTML

<div class="popover-example"> <!-- NEW -->
  <div class="popover top">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover top</h3>
    <div class="popover-content">
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
  </div>
</div>

CSS

.popover-example .popover {
  position: relative;
  display: block;
  margin: 20px;
}

D&EACUTE;MO

20
davidpauljunior

Essaye ça:

$('your_selector').popover('show');
4
rboarman

Nous avons trouvé une solution assez simple (je ne sais pas si c'est la meilleure, mais le travail est fait).

A ma popover html, j'ai ajouté une classe que j'ai appelée .static-popover:

<div class="popover left static-popover" id="testPopover">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover left</h3>
    <div class="popover-content">
        <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
</div>

classe css:

.static-popover { display: block !important; }

depuis l'emplacement de départ de popover div, il apparaît en haut: 0 et à gauche: 0, dans mon cas, j'ai créé une définition CSS pour "testPopover" avec le haut et la gauche appropriés pour mes besoins.

3
developer82

J'aime l'idée d'ajouter la classe static-popover. Dans cet esprit, ajoutez simplement une fonction JS.

$('.static-popover').show().css('position','relative');
0
Clinton Green

Une approche légèrement différente consiste à l'afficher par programmation au chargement de la page. Et désactivez l'événement hide ('hide.bs.popover') du popover. Disons que j'ai un formulaire (id = myForm) auquel je voulais associer un popover. Et je veux que le popover soit toujours visible. En supposant que vous utilisez jQuery, vous pouvez effectuer les opérations suivantes:

$("#myForm").popover();
$("#myForm").popover("show");

$('#myForm').on('hide.bs.popover', function () { return false;});
0
Rose