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
{up tooltip=texte info-bulle}texte{/up tooltip}- tooltip: texte de la bulle. bbcode permis
style et position de la bulle
- model: une des classes principales définies dans up-model.scss
- position = center: left, right
- bottom (b,bas): vrai pour afficher la bulle au-dessous
- width (l,largeur,w) = 250: largeur maxi de l'info-bulle
- offset: décalage vertical de info-bulle. Négatif=vers le haut
- opacity = 95: transparence de l'info-bulle
- open: info-bulle affichée au chargement de la page
Style CSS pour l'élément déclencheur
- id: identifiant
- 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)
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.
- Le style par défaut
- un style blanc (model=white)
- un style bleu (model=blue)
- un style vert (model=green)
- un style orange (model=orange)
- un style jaune (model=yellow)
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)model="nom_modele" dans la section options du fichier custom/prefs.ini de l'actionLes 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.
upactionslist (1) div (1) tooltip (10) csv2table (1) icon (1) csv2def (1) jcontent-info (1)