Le widget sm:WTooltip

Présentation

Dans plusieurs transformers on peut retrouver le widget sm:WTooltip. Celui-ci permet de construire des tooltips riches. Exemple de syntaxe :

<sm:WTooltip commonClass="tip">
	<sm:label>
		Zone qui active le tooltip, l'ancrage
	</sm:label>
	<sm:tooltip trigger="onmouseover" displayOptions="SHADOW:true">
		<sm:ttTitle>
			Les tooltips peuvent avoir un titre
		</sm:ttTitle>
		<sm:ttContent>
			Le contenu du tooltip...
		</sm:ttContent>
	</sm:tooltip>
</sm:WTooltip>

Paramétrage

note: cette partie est à mettre à jour pour SCENARI3.3 (qui simplifie la définition des paramètres)

sm:tooltip possède deux attributs:

• trigger = "onmouseover|onclick" Par défaut le trigger est onmouseover. Ceci spécifie comment le tooltip doit apparaître.
• displayOptions="KEY1:valueA,KEY2:valueB, etc..." Les tooltips possèdent divers options d'affichage:
  • SHADOW:true|false Afficher une ombre à la tooltip, false par défaut
  • MAXWIDTH:400 Largeur maxi en px de la tooltip, 400px par défaut
  • MAXHEIGHT:250 Hauteur maxi en px de la tooltip' 250px par défaut
  • ABOVE:true|false Afficher la tooltip au dessus du point d'ancrage, false par défaut
  • DELAY:500 Temporisation en millisecondes avant l'affichage de la tooltip, 500ms par défaut
  • FIX:[x,y] Coordonnés en px où la tooltip sera affichée, pas utilisé par défaut
  • FIXID:'container' ID de l'objet relatif auquel doit être positionné le tooltip. Ce paramètre n'est pas pris en compte si FIX:[x,y] est absent, pas utilisé par défaut
  • LEFT:true|false Faire apparaître la tooltip à gauche du pointeur, false par défaut
  • OFFSETX:12 Offset en px horizontale de la tooltip par rapport au pointeur, 12px par défaut
  • OFFSETY:15 Offset en px verticale de la tooltip par rapport au pointeur, 15px par défaut
  • STATIC:true|false Ne pas faire bouger la tooltip avec le pointeur, false par défaut
  • STICKY:true|false Ne pas faire disparaître la tooltip lorsque le pointeur se déplace en dehors ds la zone d'encrage. Dans ce cas la tooltip disparaît si: une autre tooltip est affichée, l'utilisateur clique en dehors de la tooltip, false par défaut
  • TEMP:0 Tempo en ms de suppression de la tooltip, 0 par défaut: la tooltip est affiché en continue

Attention !

Les displayOptions="KEY1:valueA,KEY2:valueB, etc..." ont une syntaxe strict. La liste des options est en fait le contenu d'une structure de données Javascript, c.a.d. que si dans displayOptions on a écrit: KEY1:valueA,KEY2:valueB dans l'html généré on retrouvera {KEY1:valueA,KEY2:valueB} Si vous faites une faute de frappe alors le tooltip pourra ne pas marcher sur certains navigateurs. Par exemple, si vous ajoutez une virgule à la fin des options, Internet Explorer remontera une erreur JavaScript et le tooltip ne sera pas affiché.

Remarques

• Si un contenu d'une tooltip est plus grand que MAXHEIGHT alors la tooltip ajoute une scrollbar verticale et deviens forcément STICKY (pour que l'utilisateur puisse scroller et lire le contenu)
• Le stylage de ce widget utilise 5 classes (ici le préfix .tip est un exemple à remplacer par l'internalClass ou le commonClass):
  • .tip_a {} Stylage de la zone d'ancrage de la tooltip
  • .tip {} Stylage de la tooltip
  • .tip_ti {} Stylage du titre de la tooltip
  • .tip_co {} Stylage du contenu de la tooltip
  • .tip_sh {} Stylage de l'ombre de la tooltip
• Le stylage de l'ombre (.tooltipstyle_sh) est conçu pour fournir trois éléments (nous ne répondons pas du résultat si d'autres règles CSS sont spécifiés):
  • la couleur, par ex: background-color: #CCCCCC;
  • l'épaisseur, par ex: width: 3px; (la librairie JS de gestion des tooltips utilise cette valeur pour calculer l'épaisseur de l'ombre)
  • l'opacité, par ex: -moz-opacity:0.8; /*opacity mozilla*/ filter:Alpha(opacity=80); /*opacity ie6*/ opacity:0.7; /*opacity safari*/
• Il est possible d'ajouter de la transparence aux tooltips dans les styles (cf la remarque précédente) pour ie6, mozilla et safari.