frendeitpt

popover ~ popup lors d'un clic

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
🆙 popover : Affiche une grosse info-bulle lors d'un clic sur un élément.

Cliquer pour lire la documentation

syntaxe {up popover=texte appel en bbcode}contenu popover{/up popover}
author LOMART version UP-2.5 license GNU/GPLv3 credit script jquery-gpopover-plugin de markembling tags HTML
  • popover: bbcode pour élément déclencheur
  • tag = button: balise pour élément déclencheur
  • 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
  • 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
  • width (l,largeur,w) = 250: largeur du popover
  • top (t) = false: true : popover au-dessus du trigger, sinon au-dessous
  • arrow = true: affichage de la fleche
  • offset = 0: décalage entre trigger et popover
  • viewportSideMargin = 10:
  • fadeInDuration = 65:
  • fadeOutDuration = 65:
  • preventHide = true:
  • onShow:
  • onHide:

    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 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"

     

    Exemple de popover avec un fond noir et du texte blanc
    Un popover sur fond vert
    {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}
    Notez l'utilisation de la nouvelle action color pour fournir le code de la couleur vert foncé utilisé par le site
    Un popover sans flèche avec un fond vert
    {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}
    Ceci est le texte du 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>

    IndianRed (#CD5C5C)
    LightCoral (#F08080)
    Salmon (#FA8072)
    DarkSalmon (#E9967A)
    LightSalmon (#FFA07A)
    Crimson (#DC143C)
    Red (#FF0000)
    FireBrick (#B22222)
    DarkRed (#8B0000)
    Pink (#FFC0CB)
    LightPink (#FFB6C1)
    HotPink (#FF69B4)
    DeepPink (#FF1493)
    MediumVioletRed (#C71585)
    PaleVioletRed (#DB7093)
    LightSalmon (#FFA07A)
    Coral (#FF7F50)
    Tomato (#FF6347)
    OrangeRed (#FF4500)
    DarkOrange (#FF8C00)
    Orange (#FFA500)
    Gold (#FFD700)
    Yellow (#FFFF00)
    LightYellow (#FFFFE0)
    LemonChiffon (#FFFACD)
    LightGoldenrodYellow (#FAFAD2)
    PapayaWhip (#FFEFD5)
    Moccasin (#FFE4B5)
    PeachPuff (#FFDAB9)
    PaleGoldenrod (#EEE8AA)
    Khaki (#F0E68C)
    DarkKhaki (#BDB76B)
    Lavender (#E6E6FA)
    Thistle (#D8BFD8)
    Plum (#DDA0DD)
    Violet (#EE82EE)
    Orchid (#DA70D6)
    Fuchsia (#FF00FF)
    Magenta (#FF00FF)
    MediumOrchid (#BA55D3)
    MediumPurple (#9370DB)
    BlueViolet (#8A2BE2)
    DarkViolet (#9400D3)
    DarkOrchid (#9932CC)
    DarkMagenta (#8B008B)
    Purple (#800080)
    Indigo (#4B0082)
    SlateBlue (#6A5ACD)
    DarkSlateBlue (#483D8B)
    GreenYellow (#ADFF2F)
    Chartreuse (#7FFF00)
    LawnGreen (#7CFC00)
    Lime (#00FF00)
    LimeGreen (#32CD32)
    PaleGreen (#98FB98)
    LightGreen (#90EE90)
    MediumSpringGreen (#00FA9A)
    SpringGreen (#00FF7F)
    MediumSeaGreen (#3CB371)
    SeaGreen (#2E8B57)
    ForestGreen (#228B22)
    Green (#008000)
    DarkGreen (#006400)
    YellowGreen (#9ACD32)
    OliveDrab (#6B8E23)
    Olive (#808000)
    DarkOliveGreen (#556B2F)
    MediumAquamarine (#66CDAA)
    DarkSeaGreen (#8FBC8F)
    LightSeaGreen (#20B2AA)
    DarkCyan (#008B8B)
    Teal (#008080)
    Aqua (#00FFFF)
    Cyan (#00FFFF)
    LightCyan (#E0FFFF)
    PaleTurquoise (#AFEEEE)
    Aquamarine (#7FFFD4)
    Turquoise (#40E0D0)
    MediumTurquoise (#48D1CC)
    DarkTurquoise (#00CED1)
    CadetBlue (#5F9EA0)
    SteelBlue (#4682B4)
    LightSteelBlue (#B0C4DE)
    PowderBlue (#B0E0E6)
    LightBlue (#ADD8E6)
    SkyBlue (#87CEEB)
    LightSkyBlue (#87CEFA)
    DeepSkyBlue (#00BFFF)
    DodgerBlue (#1E90FF)
    CornflowerBlue (#6495ED)
    MediumSlateBlue (#7B68EE)
    RoyalBlue (#4169E1)
    Blue (#0000FF)
    MediumBlue (#0000CD)
    DarkBlue (#00008B)
    Navy (#000080)
    MidnightBlue (#191970)
    Cornsilk (#FFF8DC)
    BlanchedAlmond (#FFEBCD)
    Bisque (#FFE4C4)
    NavajoWhite (#FFDEAD)
    Wheat (#F5DEB3)
    BurlyWood (#DEB887)
    Tan (#D2B48C)
    RosyBrown (#BC8F8F)
    SandyBrown (#F4A460)
    Goldenrod (#DAA520)
    DarkGoldenrod (#B8860B)
    Peru (#CD853F)
    Chocolate (#D2691E)
    SaddleBrown (#8B4513)
    Sienna (#A0522D)
    Brown (#A52A2A)
    Maroon (#800000)
    White (#FFFFFF)
    Snow (#FFFAFA)
    Honeydew (#F0FFF0)
    MintCream (#F5FFFA)
    Azure (#F0FFFF)
    AliceBlue (#F0F8FF)
    GhostWhite (#F8F8FF)
    WhiteSmoke (#F5F5F5)
    Seashell (#FFF5EE)
    Beige (#F5F5DC)
    OldLace (#FDF5E6)
    FloralWhite (#FFFAF0)
    Ivory (#FFFFF0)
    AntiqueWhite (#FAEBD7)
    Linen (#FAF0E6)
    LavenderBlush (#FFF0F5)
    MistyRose (#FFE4E1)
    Gainsboro (#DCDCDC)
    LightGrey (#D3D3D3)
    Silver (#C0C0C0)
    DarkGray (#A9A9A9)
    Gray (#808080)
    DimGray (#696969)
    LightSlateGray (#778899)
    SlateGray (#708090)
    DarkSlateGray (#2F4F4F)
    Black (#000000)

    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>

    bleuFonce #001F3F
    bleu #01427F
    bleuClair #069
    bleuPale #BCE0FF
    vertFonce #006400
    vert #46A546
    vertClair #98fb98
    brun #A0522D
    beige #E8DAC3
    rougeFonce #8B0000
    rouge #F11
    rougeClair #F08080
    jauneFonce #FFC40D
    jaune #FE0
    jauneClair #FFFFE0
    orange #FF851B
    rose #F012BE
    violet #9400D3
    noir #000
    grisFonce #333
    gris #888
    grisClair #BBB
    grisPale #EEE
    blanc #FFF
    transparent

    Connexion

    Ceci est le texte du popover qui peut contenir des images
    Ici les explications ...

    {up popover=explications
     | tag=span
     | class=ud}
    Ici les explications ...
    {/up popover}
    Le shortcode pour utiliser une image

    {up popover=[img src="/images/up-lego-icon.png"]
     | tag=span}
    le shortcode pour utiliser une image ...
    {/up popover}
    
    Le bouton est stylé avec l'option class

    {up popover=Cliquez-moi
     | class=btn btn-primary}
    Le bouton est stylé avec l'option class ...
    {/up popover}
    Je recouvre le bouton si offset est négatif.
    {up popover=Je recouvre le bouton
     | offset=-50} Je recouvre le bouton si offset est négatif. {/up popover}
    Je suis à 50 pixels de mon bouton.
    {up popover=Je suis au-dessus
     | offset=50} Je suis à 50 pixels de mon bouton. {/up popover}
    Je suis affiché au-dessus avec ce shortcode.
    {up popover=Je suis au-dessus
     | top} Je suis affiché au-dessus avec ce shortcode {/up popover}
    Ceci est le texte du popover
    Ceci est le texte du popover
    Ceci est le texte du popover
    Ceci est le texte du popover