Popovers

Placement

data-placement

top

Au-dessus du déclencheur.

bottom

En dessous. C’est la valeur par défaut.

left

À gauche, centré verticalement.

right

À droite, centré verticalement.

Recouvrement

data-placement
cover-*

cover-tl

Monte, aligné à gauche du déclencheur.

cover-tr

Monte, aligné à droite.

cover-bl

Descend, aligné à gauche.

cover-br

Descend, aligné à droite.

Alignement

data-align

start

Bord gauche sur le bord gauche du déclencheur.

center

Centré sur le déclencheur.

end

Bord droit sur le bord droit.

Contenu

slots

Corps seul

Le slot rembourré : une colonne à 12 de padding et 12 de gouttière. Tout ce que porte un popover en est un enfant.

Classer dans :

Largeur

.w-*

.w-150

150 px au plus. Le popover n’a pas de taille à lui : c’est une surface à une largeur.

.w-180

180 px au plus. Le popover n’a pas de taille à lui : c’est une surface à une largeur.

.w-240

240 px au plus. Le popover n’a pas de taille à lui : c’est une surface à une largeur.

.w-300

300 px au plus. Le popover n’a pas de taille à lui : c’est une surface à une largeur.

.w-400

400 px au plus. Le popover n’a pas de taille à lui : c’est une surface à une largeur.

Balisage

<button data-popover-to="mon-popover">Options</button>

<!-- placement est une DEMANDE : js/popover.js retourne le
     popover s’il dépasse, et écrit data-actual-placement -->
<div class="ice-popover w-300" id="mon-popover"
     data-placement="bottom" data-align="center">
  <div class="ice-popover__body">
    <div class="ice-popover__list">
      <span class="ice-popover__label">Classer dans :</span>
      <button class="ice-popover__item" data-selected>…</button>
      <button class="ice-popover__item">…</button>
    </div>
    <div class="ice-popover__actions">…</div>
  </div>
</div>