Cette action affiche une grosse info-bulle lors d'un clic sur un élément.

Elle est basée sur une version adaptée pour UP du script jquery-gpopover-plugin de markembling

Un exemple simple

{up popover=Cliquez-moi}Ceci est le texte du popover{/up popover}

Je pense que l'exemple se suffit à lui-même ! Un clic pour afficher, un autre clic pour le fermer

Position du popover

Le popover va se positionner au mieux horizontalement en fonction de la taille de l'écran. Modifier la largeur de votre navigateur pour voir le résultat.

Les options disponibles pour le positionnement sont :

• top : le popover est affiché au-dessus de l'élément déclencheur Je suis au-dessus
• offset : distance entre l'élément déclencheur et le popover Je suis loin du bouton Je recouvre le bouton
• viewportSideMargin : espace minimal (en pixels) entre le bord du popover et le navigateur.

L'élément déclencheur

Par défaut, le texte passé comme argument principal est pris comme étant le texte d'un bouton. Il est possible de le relooker avec les options class et style.

Exemple: Cliquez-moi

L'option tag permet d'utiliser une autre balise. En pratique, seule la balise span présente un intérêt, mais il est possible de toutes les utiliser.

Pour une image :

Pour un mot dans une phrase : Pour fournir des explications sur un mot

Les contenus du popover

{up popover={up icon=Ux1F30E} Un contenu [b]enrichi[/b]}
Ceci est le texte du popover qui peut contenir des images  
<img src="/images/photos/Perroquets.jpg">
{/up popover}

L'action accepte du bbcode et d'autres actions UP pour définir le contenu du bouton.

Le contenu du popover, c'est du HTML saisi directement dans un éditeur wysiwyg.
Ce peut-être d'autres plugins de contenu Joomla ou des actions UP. Quelques exemples

{up popover=Connexion | width=350}
  {loadposition mod_login}
{/up popover}

{up popover=Les mémentos de UP | width=350}
  {up jcontent-list=19}
{/up popover}

{up popover=Liste des couleurs sures
 | width=450 | max-height=60vh}
  {up file-view=images/actions-demo/modal/liste-couleurs-sures.html}
{/up popover}

note : les exemples ci-dessus utilisent des options pour définir la largeur (width) et la hauteur maximale (max-height) du contenu.
Pour le dernier exemple, le petit triangle qui fait office de flèche n'est pas affiché (arrow)

Donner du style au popover

Il suffit d'utiliser les options pop-class et pop-style.

du texte jaune sur un fond vert

Comme vous pouvez le remarquer, la petite flèche n'a pas changé de couleur, ni de bordures.
Pour éviter cela, il existe 2 solutions :

• la radicale : supprimer la flèche (et le souci de bordure) avec l'option arrow=0  du texte jaune sur un fond vert
• utiliser l'option pop-bg-color   du texte jaune sur un fond vert

Vous pouvez aussi surcharger le fichier SCSS (dans le sous-dossier custom) pour modifier le rendu. A la fin du fichier d'origine, vous trouverez la structure pour créer des variantes colorées pour le fond.

Avec css-head

Le popover est du code HTML inclus dans un bloc dont l'ID reprend celle de l'action suivi de -content

Pour utiliser des règles CSS pour les éléments inclus dans le popover, utilisez l'option css-head.

Exemple pour modifier les marges des titres h3 dans le popover :

• css-head=.gpopover h3[margin:0] pour appliquer la règle à tout les popovers de la page
• css-head=#id-content h3[margin:0] pour limiter la règle à cette instance

disparition et apparition graduelle

fadeInDuration et fadeOutDuration sont des options pour définir la durée d'apparition et de disparition du popover en millisecondes.

Pensez au prefset

En tant que webmaster, vous voulez uniformiser le style des popovers.

Il suffit de mettre vos préférences dans un fichier prefs.ini du sous-dossier custom de l'action popover.

Pour exemple, avec les informations suivantes, tous les popovers auraient un fond noir avec du texte blanc

[options]
pop-bg-color="#333"
pop-class ="t-blanc"

{up popover=du texte jaune sur un fond vert
 | pop-bg-color={up color=vertfonce}
 | pop-class=t-jaune bd2 bd-rouge
 | class=badge-bleu | w=450}
 Un popover sur fond vert
{/up popover}

{up popover=du texte jaune sur un fond vert
 | pop-class=bg-vertFonce t-jaune bd2 bd-rouge
 | arrow=0
 | class=badge-bleu | w=450}
 Un popover sans flèche avec un fond vert
{/up popover}

{up popover=du texte jaune sur un fond vert
 | pop-class=bg-vertFonce t-jaune bd2 bd-rouge
 | class=badge-bleu | w=450}
 Ceci est le texte du popover
{/up popover}

Ceci est le texte du popover qui peut contenir des images

{up popover=explications
 | tag=span
 | class=ud}
Ici les explications ...
{/up popover}

{up popover=[img src="/images/up-lego-icon.png"]
 | tag=span}
le shortcode pour utiliser une image ...
{/up popover}

{up popover=Cliquez-moi
 | class=btn btn-primary}
Le bouton est stylé avec l'option class ...
{/up popover}

{up popover=Je recouvre le bouton
 | offset=-50}
Je recouvre le bouton si offset est négatif.
{/up popover}

{up popover=Je suis au-dessus
 | offset=50}
Je suis à 50 pixels de mon bouton.
{/up popover}

{up popover=Je suis au-dessus
 | top}
Je suis affiché au-dessus avec ce shortcode
{/up popover}