tooltip ~ info-bulle au survol

Permets d'afficher un message au survol d'un élément

Réalisé à partir d'une version adaptée du script Zebra Tooltips de stefangabos

➠ tooltip : des info-bulles au survol d'un élément

Cliquer pour lire la documentation

syntaxe {up tooltip=texte info-bulle}texte{/up tooltip}
author LOMART version UP-1.9.5 license GNU/GPLv3 credit sur un script de stefangabos tags Editor
  • tooltip: texte de la bulle. bbcode permis
  • model: une des classes principales définies dans up-model.scss
  • position = center: left, right
  • bottom (b,bas) = 0: vrai pour afficher la bulle au-dessous
  • width (l,largeur,w) = 250: largeur maxi de l'info-bulle
  • offset = 0: décalage verticcal de info-bulle. Négatif=vers le haut
  • opacity = 95: transparence de l'info-bulle
  • open = 0: info-bulle affichée au chargement de la page
  • class: classe(s) pour bloc
  • style: style inline pour bloc
  • css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)

    Pour voir les exemples, survolez avec votre souris les textes soulignés en pointillés. Sur smartphone, il faut cliquer rapidement.

    Un exemple simple

    Avec UP, ajouter une info-bulle pour préciser une information est très facile.

    Si vous survolez le mot UP avec votre souris, une info-bulle va apparaître. Le code de la ligne ci-dessus est :

    Avec {up tooltip=Universal Plugin}UP{/up tooltip}, ajouter une info-bulle pour préciser une information est très facile.

    Donc pour ajouter un texte d'information, il suffit de le mettre comme argument de l'option principale.

    Avec quelques options

    Un exemple pour montrer les possibilités d'info-bulle avec UP.

    La ligne ci-dessus vu en mode code donne ceci :

    Un exemple pour montrer les possibilités d'
    {up tooltip=En informatique, une infobulle est un message qui apparaît en surimpression lors du passage du pointeur de la souris sur certains éléments de l'interface graphique. [a href="//fr.wikipedia.org/wiki/Infobulle" target="_blank" class="u"]source Wikipedia[/a]
     | opacity=100
     | model=white
     | position=left
     | bottom
     | width=450 }
    info-bulle
    {/up tooltip} 
    avec 
    {up tooltip=[div class="tc"][img src="/images/up-lego-150x115px.png" height="115" width="150"][br]Un plugin Universel pour enrichir vos contenus.[/div]
     | w=200}
    UP
    {/up tooltip}
    2 le texte avec un lien web pour la première info-bulle. Notez bien l'utilisation de bbcode et l'absence de https: devant l'url. Ces 2 mesures évitent l'interprétation par un éditeur wysiwyg.
    3, 4 on choisit une bulle opaque sur fond blanc
    5, 6 la bulle est au-dessous et à gauche du texte
    7 la largeur de la bulle fera 450px au maximum
    8 le texte pour lequel s'affiche la bulle. Notez que par défaut, il est souligné en pointillé.
    11 cette info-bulle montre l'utilisation de bbcode pour afficher une image. Il est impératif d'indiquer sa dimension.
    12 la bulle fait 200px. Notez que j'utilise w la forme abrégée de width proposée par le dico de UP. Il s'agit des mots entre parenthèses dans la documentation de base visible dans la barre bleue déroulante en tête des démos.

    Les styles : model

    UP propose plusieurs styles pour les info-bulles.

    Vous pouvez modifier ou créer vos propres styles dans le fichier /style/up-model.scss de l'action.

    Note pour les curieux : le smiley sur le modèle jaune est ajouté avec l'action icon en précisant la taille pour que l'action tooltip puisse la réserver.

    un style {up tooltip={up icon=smiley | size=32} un petit sourire | model=yellow | w=350}jaune{/up tooltip} (model=yellow)
    Pour définir un model par défaut pour votre site, ajouter model="nom_modele" dans la section options du fichier custom/prefs.ini de l'action

    Les options

    tooltip

    Le contenu de l'info-bulle au format texte. bbcode autorisé.

    Attention :

    • avec un éditeur wysiwyg, pour éviter qu'il transforme une URL en lien clicable, mettre uniquement // sans http: ou https:
    • pour une image, il est impératif de spécifier la hauteur et largeur
    model

    Il s'agit du nom d'une des classes principales définies dans le ficher style/up-model.scss

    position

    Position de l'infobulle par rapport à l'élément. Peut-être 'center', 'left' ou 'right'.

    bottom

    Par défaut, les info-bulles sont affichées au-dessus des éléments auxquels elles sont attachées et ne sont affichées au-dessous que s'il n'y a pas assez d'espace au-dessus.

    Définissez cette option si vous souhaitez inverser le comportement par défaut afin que les info-bulles soient affichées sous les éléments auxquels elles sont attachées et soient affichées au-dessus uniquement, il n'y a pas assez d'espace en dessous.

    width

    largeur maxi de l'info-bulle. 250px par défaut.

    offset

    À quelle distance (en pixels) la pointe de l'infobulle doit-elle être par rapport à l'élément parent.

    opacity

    Opacité de l'info-bulle sous forme de pourcentage. 95% par défaut.

    open

    si cette option est spécifiée, l'info-bulle sera ouverte dès le chargement de la page.