Members

static initDelay :Number

main.js, line 29

Le délai en milisecondes avant de commencer à vérifier, dans le DOM, les balises html necéssitant un TooltipJS

Default Value:

• 100

Example

Attendre une demi-seconde avant de détecter, dans le DOM, les balise necéssitant un TooltipJS

 TooltipJS.initDelay = 500;

static tooltipStyle :Object

main.js, line 64

Le style css affecté au conteneur HTML d'un TooltipJS. Il aussi est possible d'ajouter n'importe quelle propriété CSS n'étant pas définie par défaut.
Note: Aucun fichier CSS nécessaire puisque le style sera affecté par JavaScript. Il est aussi possible de spécifier un style CSS sur mesure pour un TooltipJS particulier voir TooltipJS.addTooltip

Properties:

Name	Type	Description
BASE	Object	Propriétés du style CSS de base pour tout TooltipJS Properties Name Type Default Description display String "none" Type d'affiche du TooltipJS position String "fixed" Type de positionnement du TooltipJS top String "0" Position verticale du TooltipJS left String "0" Position horizontale du TooltipJS pointerEvents String "none" Le TooltipJS ne bloque pas les événements de la souris opacity String "0" Opacité de départ du TooltipJS zIndex String "1000" Index de profondeur du TooltipJS
DEFAULT	Object	Propriétés du style CSS par défaut pour le TooltipJS par défaut Properties Name Type Attributes Default Description width String <optional> "auto" Largeur par défaut du TooltipJS height String <optional> "auto" Hauteur par défaut du TooltipJS backgroundColor String <optional> "#ffffcc" par défaut Couleur de fond du TooltipJS color String <optional> "#000" Couleur par défaut du texte du TooltipJS margin String <optional> "0" Marges par défaut du TooltipJS padding String <optional> "0.2rem" Padding par défaut du TooltipJS fontFamily String <optional> "Arial" Police par défaut du TooltipJS fontSize String <optional> "0.8rem" Grosseur par défaut du texte du TooltipJS border String <optional> "1px solid #000" Le type de bordure par défaut du TooltipJS boxSizing String <optional> "border-box" Les bordures sont calculées comme étant intérieures au TooltipJS boxShadow String <optional> "3px 3px 5px rgba(0,0,0,0.5)" Le style d'ombrage par défaut du TooltipJS

Example

Changer le style par defaut du conteneur du TooltipJS.

TooltipJS.tooltipStyle.DEFAULT.fontFamily = "Verdana";
//Ajout d'une propriété qui n'existe pas à la base'
TooltipJS.tooltipStyle.DEFAULT.borderBottom = "5px solid #fff";

Methods

static addTooltip(elem, toolTipText, fadeDurationopt, customStyleopt, positionMarginsopt, boundsPaddingopt, fixedopt, hideOnClickopt, hideDelayopt, htmlTemplateopt) → {undefined}

main.js, line 134

Association d'un TooltipJS pour un élément HTML donné
Note: Il est aussi possible d'associer un TooltipJS à un élément sans appel JavaScript direct.

Parameters:

Name	Type	Attributes	Default	Description
elem	HTMLElement			La référence à l'élément HTML pour lequel associer le TooltipJS
toolTipText	String			Le texte à afficher dans le TooltipJS
fadeDuration	Number	<optional>	250	La durée en millisecondes de l'animation d'apparition du TooltipJS
customStyle	String	<optional>	""	Le nom d'une classe CSS existante à utiliser pour affecter l'apparence du TooltipJS
positionMargins	Object	<optional>	{}	Le postionnement du TooltipJS en pixels en fonction de la position du curseur de la souris Properties Name Type Attributes Default Description x number <optional> 15 Position en pixels du TooltipJS en x en rapport avec la position du curseur de la souris y number <optional> -15 Position en pixels du TooltipJS en y en rapport avec la position du curseur de la souris
boundsPadding	Object	<optional>	{}	Le padding à prendre en compte pour la fenêtre du navigateur et les rebords du TooltipJS Properties Name Type Attributes Default Description top Number <optional> 15 Le padding en pixels à prendre en compte en haut de la fenêtre right Number <optional> 15 Le padding en pixels à prendre en compte à droite de la fenêtre bottom Number <optional> 15 Le padding en pixels à prendre en compte en bas de la fenêtre left Number <optional> 15 Le padding en pixels à prendre en compte à gauche de la fenêtre
fixed	Boolean	<optional>	false	Si l'on souhaite que le TooltipJS soit positionné en fonction du coin supérieur droit de l'élément de survol plutôt que la position de la souris
hideOnClick	Boolean	<optional>	false	Si l'on souhaite cacher le tooltip lors du clic sur l'élément
hideDelay	Number	<optional>	0	Délai avant de cacher la tooltip (0 = toujours visible)
htmlTemplate	HTMLElement	<optional>		La référence à un conteneur HTML devant servir de tooltip. La classe "tooltip-active" est automatiquement ajoutée sur le conteneur une fois ce dernier actif et complètement visible.

Returns:

undefined -

Ne retourne aucune valeur

Examples

Associer un TooltipJS par code.

TooltipJS.addTooltip(document.querySelector("#monElementId"), "Ceci est le texte du TooltipJS");
//Utiliser les paramètres optionnels
TooltipJS.addTooltip(document.querySelector("#monAutreElementId"), "Ceci est le texte d'un autre TooltipJS", 1000, "maClasse", {x:25, y:-30}, {top:0, right:0, bottom:10, left:0});

Associer un TooltipJS directement dans le DOM.

<input type="text" data-toolTipText="Veuillez inscrire votre identifiant" data-fadeDuration="1000" data-customStyle="maClasse" data-positionMargins="25,-30" data-boundsPadding="0,0,10,0" data-fixed  name="login" size="100"  placeholder="Ceci est un champs de formulaire"/>

Associer un TooltipJS avec conteneur HTML directement dans le DOM. Comme il est impossible de passer une référence directe à un element HTML, il faut passer le selecteur qui permet de récupérer le conteneur HTML voulu.

<select type="text" data-toolTipText="Ceci est un texte dynamique"  data-htmlTemplate=".tip"></select>

static removeAllTooltips() → {undefined}

main.js, line 336

Détruit toutes les associations de TooltipJS précédemment créées

Returns:

undefined -

Ne retourne aucune valeur

Example

Enlever toutes les associations de TooltipJS

 TooltipJS.removeAllTooltips();

static scanForInlineTooltips() → {undefined}

main.js, line 99

Lance la détection de balises HTML nécessitant un TooltipJS. Exécuté automatiquement au chargement de la page, il est possible que les éléments ne soient pas encore créés. Il suffit d'appeler cette fonction au moment opportun.

Returns:

undefined -

Ne retourne aucune valeur

Example

Lancer la détection

 TooltipJS.scanForInlineTooltips();

static updateTooltip(elem, toolTipText, fadeDurationopt, customStyleopt, positionMarginsopt, boundsPaddingopt, fixedopt, hideOnClickopt, hideDelayopt, htmlTemplateopt) → {undefined}

main.js, line 270

Permet de mettre à jour le TooltipJS préalablement associé à un élément HTML dans la page
Note: Il n'est pas possible de mettre à jour un TooltipJS sans appel JavaScript direct.

Parameters:

Name	Type	Attributes	Default	Description
elem	HTMLElement			La référence à l'élément HTML pour lequel mettre à jour le TooltipJS
toolTipText	String			Le texte à afficher dans le TooltipJS
fadeDuration	Number	<optional>	250	La durée en millisecondes de l'animation d'apparition du TooltipJS
customStyle	String	<optional>	""	Le nom d'une classe CSS existante à utiliser pour affecter l'apparence du TooltipJS
positionMargins	Object	<optional>	{}	Le postionnement du TooltipJS en pixels en fonction de la position du curseur de la souris Properties Name Type Attributes Default Description x number <optional> 15 Position en pixels du TooltipJS en x en rapport avec la position du curseur de la souris y number <optional> -15 Position en pixels du TooltipJS en y en rapport avec la position du curseur de la souris
boundsPadding	Object	<optional>	{}	Le padding à prendre en compte pour la fenêtre du navigateur et les rebords du TooltipJS Properties Name Type Attributes Default Description top Number <optional> 15 Le padding en pixels à prendre en compte en haut de la fenêtre right Number <optional> 15 Le padding en pixels à prendre en compte à droite de la fenêtre bottom Number <optional> 15 Le padding en pixels à prendre en compte en bas de la fenêtre left Number <optional> 15 Le padding en pixels à prendre en compte à gauche de la fenêtre
fixed	Boolean	<optional>	false	Si l'on souhaite que le TooltipJS soit positionné en fonction du coin supérieur droit de l'élément de survol plutôt que la position de la souris
hideOnClick	Boolean	<optional>	false	Si l'on souhaite cacher le tooltip lors du clic sur l'élément
hideDelay	Number	<optional>	0	Délai avant de cacher la tooltip (0 = toujours visible)
htmlTemplate	HTMLElement	<optional>		La référence à un conteneur HTML devant servir de tooltip

Returns:

undefined -

Ne retourne aucune valeur

Example

Mettre à jour un TooltipJS par code.

TooltipJS.updateTooltip(document.querySelector("#monElementId"), "Ceci est le texte du TooltipJS mis à jour");
//Utiliser les paramètres optionnels
TooltipJS.updateTooltip(document.querySelector("#monAutreElementId"), "Ceci est le texte d'un autre TooltipJS mis à jour", 1000, "maClasse", {x:25, y:-30}, {top:0, right:0, bottom:10, left:0}, true);