Popovers

Les popovers sont des éléments, affichables au click, similaires aux infobulles. Ils permettent cependant de communiquer des informations plus complètes. L'évènement déclencheur de fermeture est également plus contôlable.

<button type="button" class="btn btn-lg btn-default" data-toggle="popover" title="Popover title" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">
  Popover basé sur les attributes
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover en haut
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover à droite
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover en bas
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover à droite
</button>

Fermeture des popovers

Par défaut, les popover ne se ferment que depuis un click sur l'élément d'ouverture. Pour permettre au popover de se fermer au prochain clic, comme un menu déroulant, il faut utiliser l'option trigger: 'focus' lors de son initialisation. Le popover doit également être construit avec une balise et posséder un attribut tabindex

Popover refermable au prochain clic 
<a tabindex="0" class="btn btn-lg btn-defaults" role="button" data-toggle="popover" data-trigger="focus" title="Popover refermable au prochain clic" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover refermable au prochain clic</a>
$('.popover-dismiss').popover({
  trigger: 'focus'
})

Infobulles

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. 

<a href="#" data-toggle="tooltip" title="Message de l'infobulle">
  ...
</a>
<a href="#" data-toggle="tooltip" title="" data-original-title="Message de l'infobulle">
  ...
</a>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-html="true"
title="<em>Infobulle</em> <u>avec</u> <strong>HTML</strong>">
  ...
</button>

Positionnement de l'infobulle

Les infobulles sont positionnées dynamiquement par le composant popper.js en prenant comme référence par défaut le parent de l'infobulle. Cela peut poser problème lorsque cet élément ou un de ses parents possède un attribut overflow ou un positionnement absolu. Pour gérer les cas difficiles il est possible de déclarer un autre référentiel de positionnement avec le paramètre boundary (viewport', 'window' ou 'scrollParent' par défaut) et d'attacher l'infobulle à un autre conteneur avec le paramètre container (ex.: container:'body') 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  ...
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  ...
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  ...
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  ...
</button>

Taille des infobulles

Par défaut la taille des infobulles est limitée à 2OO px de largeur. Il est possible de modifier leur taille en eur attribuant une classe personnalisée tooltip-sm, tooltip-md, tooltip-lg, tooltip-xl , tooltip-xxl.

<div class="tooltip" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    ...
  </div>
</div>
<div class="tooltip tooltip-sm" role="tooltip">
...
</div>
<div class="tooltip tooltip-md" role="tooltip">
...
</div>
<div class="tooltip tooltip-lg" role="tooltip">
...
</div>
<div class="tooltip tooltip-xl" role="tooltip">
...
</div>
<div class="tooltip tooltip-xxl" role="tooltip">
...
</div>