Cette action affiche une grosse info-bulle lors d'un clic sur un élément.
{up popover=texte appel en bbcode}contenu popover{/up popover}- popover: bbcode pour élément déclencheur
Style de la fenêtre popup
- max-height: hauteur maxi du popover (ex: 90vh)
- pop-bg-color: couleur de fond du popover
- pop-class: classe du popover
- pop-style: style inline du popover
Style de l'élément déclencheur
- tag = button: balise pour élément déclencheur
- id: id genérée automatiquement par UP
- class: classe(s) pour element déclencheur
- style: style inline pour element déclencheur
- css-head (base-css): style ajouté dans le HEAD de la page
- filter: conditions. Voir doc action filter
paramètres Javascript pour la configuration du popover
- width (l,largeur,w) = 250: largeur du popover en px
- top (t) = false: true : popover au-dessus du trigger, sinon au-dessous
- arrow = true: affichage de la fleche
- offset: décalage entre trigger et popover
- viewportSideMargin = 10: Espace à laisser sur le côté lorsqu'il est contre le bord de la fenêtre (pixels)
- fadeInDuration = 65: Durée de l'animation de fondu enchaîné popover (ms)
- fadeOutDuration = 65: Durée de l'animation de fondu sortant du popover (ms)
- preventHide = true: Empêcher le masquage lors d'un clic dans le popover
- onShow: fonction à exécuter lorsque le popover est affiché. c'est l'élément déclencheur et le premier argument passé à la fonction est l'élément popover (tous deux enveloppés dans jQuery).
- onHide: Callback à exécuter lorsque le popover est masqué. Identique à onShow.
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
- offset : distance entre l'élément déclencheur et le popover
- 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:
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
Un module joomla
{up popover=Connexion | width=350}
{loadposition mod_login}
{/up popover}Une liste pour un menu
{up popover=Les mémentos de UP | width=350}
{up jcontent-list=19}
{/up popover}Un fichier externe
{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.
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
- utiliser l'option pop-bg-color
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 pagecss-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"
upactionslist (1) flexauto (3) popover (18) div (3) icon (1) flexbox (1) jcontent-list (1) file-view (1) color (1) jcontent-info (1)
{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}Couleurs nommées reconnues par les navigateurs
Le nom de la couleur est à utiliser comme argument d'une propriété CSS.
exemple: .foo {color: IndianRed;} ou <span style="color: IndianRed">texte rouge</span>
Les couleurs de UP
Le nom des couleur est utilisé comme suffixe des classes UP.
exemple: <span class="bg-rouge t-jaune bd-rougeFonce">texte jaune sur fond rouge</span>
Connexion
{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}