Controls.Container.Tooltip

Le widget Yahoo.Widget.Tooltip permet de proposer des fenêtres d'informations personnalisées sur les éléments DOM.
Ces fenêtres d'informations (ndr : définissables via les attributs 'title' des éléments DOM) étaient jusqu'alors, mises en forme avec des couleurs "systèmes" fixes qu'il n'était pas possible de modifier.

La librairie YUI dans sa grande classe propose de rendre ces fenêtres d'informations personnalisables de façon à pouvoir coller de façon parfaite avec des interfaces graphiques travaillées et dans lesquelles les couleurs "systèmes" de base utilisées pour ces fenêtres ne cadrant pas.


La syntaxe du constructeur de cet objet est la suivante :
/* constructeur */ YAHOO.widget.Tooltip ( el , userConfig )

'el' correspond à l'élément auquel attaché la 'Tooltip' et 'userConfig' à un objet d'options littéral dont les possibilités sont reprises dans le tableau ci après.

!!! :: cet objet ou widget hérite aussi des propriétés de Controls.Container .
Les détails de Controls.Container sont précisées dans la page homonyme.

Option	Type	Défaut	Détails
text	String	null	Définit le texte présenté dans la Tooltip
context	String ou Array	null	Définit le ou les éléments pour lesquels onMouseOver affiche la Tooltip.
container	String / Element	document.body	Définit le container dans lequel devra être affiché la Tooltip. Par défaut dans le 'body' de la page.
preventoverlap	Boolean	true	11/01/2007 : mise à jour à faire
showdelay	Number	200	Nombre millisecondes avant de montrer la Tooltip.
hidedelay	Number	250	Nombre de millisecondes avant de cacher la Tooltip.
autodismissdelay	Number	5000	Nombre de millisecondes avant de cacher la Tooltip si le pointeur de la souris reste au dessus de l'élément.

Des exemples d'utilisation sont présentés ci après et sont accessibles via la liste déroulante ci dessous :
Exemple d'utilisation #00 de Controls.Container.Tooltip Exemple d'utilisation paramétrable de Controls.Container.Tooltip

!!! : la librairie Prototype.js a été incluse dans cette page afin de simplifier l'accès aux exemples via Element.ScrollTo et permettre un test 'personnalisable' de Tooltip.

Exemple d'utilisation #00 de Controls.Container.Tooltip

Cet exemple permet de tester le widget Tooltip sur un élément DOM 'div' et sur un élément DOM 'a'.
L'exemple est testable ci après :

Passez au dessus pour afficher la Tooltip

Passer au dessus pour afficher la Tooltip

Le code source de l'exemple est repris ci après avec dans l'ordre :

• les inclusions Javascript de YUI
• l'inclusion CSS pour 'container' et les styles CSS spécifiques à la page
• le code HTML présentant les éléments DOM concernés par les Tooltip.
• le code Javascript définissant les Tooltip.

Les inclusions de fichiers javascript de YUI en fonction du besoin :
<!-- inclusion Javascript YUI --> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/event/event.js" ></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/dom/dom.js" ></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/container/container.js"></script>
Les définitions de style CSS :
<link type="text/css" rel="stylesheet" href="http://www.webjax.eu/js/YUI_0_12_2/container/assets/container.css"> <style type="text/css"> #test_0 { background:#B7DBFF; border : #379BFF 2px solid;width:300px;height:75px; } .tt { background-color:#A8D3FF; border:1px solid #379BFF; } </style>
On peut voir que cet extrait code reprend un style '.tt'.
Ce style est peaufiné mais déclaré dans 'container/assets/container.css'.

Le code HTML des éléments DOM :
<div id="test_0">Passez au dessus pour afficher la Tooltip</div> <a id="test_1" href="http://www.nicoweb.fr" target="_new" title="toto président webjax c'est bien">Passer au dessus pour afficher la Tooltip</a>
Le code Javascript définissant les Tooltip
<script type="text/javascript"> tt1 = new YAHOO.widget.Tooltip("tt1", { context:"test_0", text:"toto président toto président webjax c'est bien webjax c'est bien" }); tt2 = new YAHOO.widget.Tooltip("tt2", { context:"test_1" }); </script>

Suite à la prise de connaissance du code Javascript définissant les Tooltip, on peut se rendre compte que l'on trouve deux initialisations différentes en ce qui concerne la valeur à recopier dans les Tooltip ou "fenêtres d'informations".
L'élément 'test_0' se voit assigner un texte de base alors que l'élément 'test_1' se voit assigner le texte présent dans son attribut 'title'.

Exemple d'utilisation paramétrable de Controls.Container.Tooltip

!!! : cet exemple utilise les facilités de la librairie Prototype.js pour récupérer les valeurs paramétrables des Tooltip.
L'inclusion de Prototype.js implique néanmoins de devoir charger les 64ko de la librairie.

Paramétrage de Tooltip

Texte de la Tooltip (text) :
Elément DOM (context) : test_2 (bouton) test_3 (div violette) test_4 (a href) test_5 (select) test_6 (textarea)
Délai apparition (showdelay) : 1 5 50 100 150 200 250 300
Délai disparition (enddelay) : 1 5 50 100 150 200 250 300
Délai disparition (autodismissdelay) : 1 5 50 100 150 200 250 300 400 500 600 800 1000 2000

Eléments DOM de test :

élément 'div' toto président webjax c'est bien

toto président de la Tooltip
toto président webjax c'est bien
toto président toto président webjax c'est bien webjax c'est bien

: 12/01/2007 20:27:53 | : YUI, Yahoo, User, Interface, Controls, Container, Container.Tooltip, tooltip, container, event, yahoo, dom, DOM, fenêtre, information, customisée, customTitle,

Aucun commentaire enregistré