Aide Tooltipster
Tooltipster
Version :
Langue :
Taille :
Date de création :
Date de mise à jour :
License :
Téléchargement :
Tootipster animation CSS est un élément créé pour le logiciel OpenElement à partir de la V1.57.
Créer simplement des info-bulles sur votre page. Entièrement paramétrables, les info-bulles que vous créez sont déclenchées lorsque l’utilisateur "clique" ou "passe la souris" sur un élément.
Vous pouvez assigner autant d'élément que vous désirez sur une page, ajouter une image dans l'info-bulle, choisir des effets, des visuels ou des contenus différents pour chaque élément.
Créer simplement des info-bulles sur votre page. Entièrement paramétrables, les info-bulles que vous créez sont déclenchées lorsque l’utilisateur "clique" ou "passe la souris" sur un élément.
Vous pouvez assigner autant d'élément que vous désirez sur une page, ajouter une image dans l'info-bulle, choisir des effets, des visuels ou des contenus différents pour chaque élément.
Aide à l'installation de l'élément
1-Il faut être utilisateur du logiciel OpenElement.
2-Télécharger le fichier dll qui sera dans un fichier zip.
3-Copier le fichier dll dans le dossier "Common/Elements" de votre site web.
2-Télécharger le fichier dll qui sera dans un fichier zip.
3-Copier le fichier dll dans le dossier "Common/Elements" de votre site web.
Aide aux fonctions disponnibles
-Classe Perso : Les éléments ayant cette "Classe Perso" seront affectés par l'animation.
-Élément : L'élément sélectionné dans le menu popup sera affecté par l'animation.
-Élément : L'élément sélectionné dans le menu popup sera affecté par l'animation.
-Affichage : Affichage de l'info-bulle lorsque la souris passe dessus l'élément ou lorsque l'on clique sur l'élément.
-Affichage préféré : Affichage préféré de l'info-bulle par rapport à l'élément.
-Animation : Détermine comment l'info-bulle va s'animer à l'ouverture et à la fermeture.
-Contenu de l'info bulle : Le contenu de l'info-bulle.
-Distance : La distance entre l'origine et l'info-bulle, en pixels.
-Durée d'animation ouverture : Définit la durée d'ouverture de l'animation, en millisecondes.
-Durée d'animation fermeture : Définit la durée de fermeture de l'animation, en millisecondes.
-Flèche : Ajoutez une flèche à l'info-bulle (Cochée = oui).
-Souris in : Lors de l'interaction avec la souris, c'est le délai en millisecondes avant que l'info-bulle commence l'animation d'ouverture lorsque le déclencheur 'survol' est utilisé.
-Souris out : Lors de l'interaction avec la souris, c'est le délai en millisecondes avant que l'info-bulle commence l'animation de fermeture lorsque le déclencheur 'survol' est utilisé.
-Type d'info-bulle : Définissez un thème qui remplacera l'aspect d'info-bulle par défaut.
NOTE : Si vous sélectionner "personnaliser", cette option est à utiliser seulement avec le plugin payant. Il permet de "réaliser" son propre affichage d'info-bulle.
-Affichage préféré : Affichage préféré de l'info-bulle par rapport à l'élément.
-Animation : Détermine comment l'info-bulle va s'animer à l'ouverture et à la fermeture.
-Contenu de l'info bulle : Le contenu de l'info-bulle.
-Distance : La distance entre l'origine et l'info-bulle, en pixels.
-Durée d'animation ouverture : Définit la durée d'ouverture de l'animation, en millisecondes.
-Durée d'animation fermeture : Définit la durée de fermeture de l'animation, en millisecondes.
-Flèche : Ajoutez une flèche à l'info-bulle (Cochée = oui).
-Souris in : Lors de l'interaction avec la souris, c'est le délai en millisecondes avant que l'info-bulle commence l'animation d'ouverture lorsque le déclencheur 'survol' est utilisé.
-Souris out : Lors de l'interaction avec la souris, c'est le délai en millisecondes avant que l'info-bulle commence l'animation de fermeture lorsque le déclencheur 'survol' est utilisé.
-Type d'info-bulle : Définissez un thème qui remplacera l'aspect d'info-bulle par défaut.
NOTE : Si vous sélectionner "personnaliser", cette option est à utiliser seulement avec le plugin payant. Il permet de "réaliser" son propre affichage d'info-bulle.
-Image : Choisir une image à insérer dans l'info-bulle.
-Image Alt : Attribut "Alt" de l'image.
-Image hauteur : Hauteur de l'image insérée l'info-bulle.
-Image largeur : Largeur de l'image insérée dans l'info-bulle.
-Position du texte : Position du texte par rapport à l'image.
-Image Alt : Attribut "Alt" de l'image.
-Image hauteur : Hauteur de l'image insérée l'info-bulle.
-Image largeur : Largeur de l'image insérée dans l'info-bulle.
-Position du texte : Position du texte par rapport à l'image.
Fonctions payantes
Le plugin CSS permet de paramétrer votre propre design d'info-bulle. Toutes les info-bulles réglées sur "personnaliser" appliqueront le design que vous avez réalisé.
(background: ; opacity:)
-Couleur arrière plan : Couleur de l'arrière plan de la box.
-Transparence : Transparence de la box de 0 à 1 (étant le maximum).
Exemple : 0.5 = tranparente à 50%
-Transparence : Transparence de la box de 0 à 1 (étant le maximum).
Exemple : 0.5 = tranparente à 50%
(border-radius:)
-Angle bas droite : Arrondir l'angle du bas à droite de l'info-bulle en pixel.
-Angle bas gauche : Arrondir l'angle du bas à gauche de l'info-bulle en pixel.
-Angle haut droite : Arrondir l'angle du haut à droite de l'info-bulle en pixel.
-Angle haut gauche : Arrondir l'angle du haut à gauche de l'info-bulle en pixel.
-Angle bas gauche : Arrondir l'angle du bas à gauche de l'info-bulle en pixel.
-Angle haut droite : Arrondir l'angle du haut à droite de l'info-bulle en pixel.
-Angle haut gauche : Arrondir l'angle du haut à gauche de l'info-bulle en pixel.
(border-color:)
-Bordure de gauche : Couleur de la bordure de gauche.
-Bordure de droite : Couleur de la bordure de droite.
-Bordure du bas : Couleur de la bordure du bas.
-Bordure du haut : Couleur de la bordure du haut.
-Bordure de droite : Couleur de la bordure de droite.
-Bordure du bas : Couleur de la bordure du bas.
-Bordure du haut : Couleur de la bordure du haut.
(border:)
-Épaisseur bordure droite : Épaisseur de la bordure de droite en pixel.
-Épaisseur bordure du bas : Épaisseur de la bordure du bas en pixel.
-Épaisseur bordure du haut : Épaisseur de la bordure du haut en pixel.
-Épaisseur bordure gauche : Épaisseur de la bordure de gauche en pixel.
-Épaisseur bordure du bas : Épaisseur de la bordure du bas en pixel.
-Épaisseur bordure du haut : Épaisseur de la bordure du haut en pixel.
-Épaisseur bordure gauche : Épaisseur de la bordure de gauche en pixel.
(shadow:)
-Couleur : Couleur de l'ombre.
-Diffusion : Diffusion de l'ombre en pixel.
-Horizontale : Décalage de l'ombre sur le plan horizontal en pixel.
-Verticale : Décalage de l'ombre sur le plan vertical en pixel.
-Diffusion : Diffusion de l'ombre en pixel.
-Horizontale : Décalage de l'ombre sur le plan horizontal en pixel.
-Verticale : Décalage de l'ombre sur le plan vertical en pixel.
(border-style:)
-Style bordure de gauche : Style de la bordure de gauche.
-Style bordure droite : Style de la bordure de droite.
-Style bordure du bas : Style de la bordure du bas.
-Style bordure du haut : Style de la bordure du haut.
-Style bordure droite : Style de la bordure de droite.
-Style bordure du bas : Style de la bordure du bas.
-Style bordure du haut : Style de la bordure du haut.
(visibility:)
-Flèche : Visibilité de la flèche (le pointeur de l'info-bulle).
Visible = visible
Hidden = non visible
Visible = visible
Hidden = non visible
(background: ; opacity:)
-Bordure bas : Couleur de la bordure de la flèche losque que le pointeur est vers le bas.
-Bordure droite : Couleur de la bordure de la flèche losque que le pointeur est vers la droite.
-Bordure haut : Couleur de la bordure de la flèche losque que le pointeur est vers le haut.
-Bordure gauche : Couleur de la bordure de la flèche losque que le pointeur est vers la gauche.
-Bordure droite : Couleur de la bordure de la flèche losque que le pointeur est vers la droite.
-Bordure haut : Couleur de la bordure de la flèche losque que le pointeur est vers le haut.
-Bordure gauche : Couleur de la bordure de la flèche losque que le pointeur est vers la gauche.
(color: ; font-family: ; text-shadow:)
-Couleur du texte : Couleur du texte de l'info-bulle.
-Police de caractère : Choisir une police de caractère spécifique.
19 Exemples :
Arial, Helvetica, sans-serif
'Arial Black', Gadget, sans-serif
'Bookman Old Style', serif
'Comic Sans MS', cursive
Courier, monospace
'Courier New', Courier, monospace
Garamond, serif
Georgia, serif
Impact, Charcoal, sans-serif
'Lucida Console', Monaco, monospace
'Lucida Sans Unicode', 'Lucida Grande', sans-serif
'MS Sans Serif', Geneva, sans-serif
'MS Serif', 'New York', sans-serif
'Palatino Linotype', 'Book Antiqua', Palatino, serif
Symbol, sans-serif
Tahoma, Geneva, sans-serif
'Times New Roman', Times, serif
'Trebuchet MS', Helvetica, sans-serif
Verdana, Geneva, sans-serif
-Police de caractère : Choisir une police de caractère spécifique.
19 Exemples :
Arial, Helvetica, sans-serif
'Arial Black', Gadget, sans-serif
'Bookman Old Style', serif
'Comic Sans MS', cursive
Courier, monospace
'Courier New', Courier, monospace
Garamond, serif
Georgia, serif
Impact, Charcoal, sans-serif
'Lucida Console', Monaco, monospace
'Lucida Sans Unicode', 'Lucida Grande', sans-serif
'MS Sans Serif', Geneva, sans-serif
'MS Serif', 'New York', sans-serif
'Palatino Linotype', 'Book Antiqua', Palatino, serif
Symbol, sans-serif
Tahoma, Geneva, sans-serif
'Times New Roman', Times, serif
'Trebuchet MS', Helvetica, sans-serif
Verdana, Geneva, sans-serif
(shadow:)
-Couleur : Couleur de l'ombre.
-Diffusion : Diffusion de l'ombre en pixel.
-Horizontale : Décalage de l'ombre sur le plan horizontal en pixel.
-Verticale : Décalage de l'ombre sur le plan vertical en pixel.
-Diffusion : Diffusion de l'ombre en pixel.
-Horizontale : Décalage de l'ombre sur le plan horizontal en pixel.
-Verticale : Décalage de l'ombre sur le plan vertical en pixel.
(border-radius:)
-Angle bas droite : Arrondir l'angle du bas à droite de l'image en pixel.
-Angle bas gauche : Arrondir l'angle du bas à gauche de l'image en pixel.
-Angle haut droite : Arrondir l'angle du haut à droite de l'image en pixel.
-Angle haut gauche : Arrondir l'angle du haut à gauche de l'image en pixel.
-Angle bas gauche : Arrondir l'angle du bas à gauche de l'image en pixel.
-Angle haut droite : Arrondir l'angle du haut à droite de l'image en pixel.
-Angle haut gauche : Arrondir l'angle du haut à gauche de l'image en pixel.
(margin:)
-Espace gauche : Espace en pixel entre l'image et l'élément voisin.
-Espace droite : Espace en pixel entre l'image et l'élément voisin.
-Espace bas : Espace en pixel entre l'image et l'élément voisin.
-Espace haut : Espace en pixel entre l'image et l'élément voisin.
-Espace droite : Espace en pixel entre l'image et l'élément voisin.
-Espace bas : Espace en pixel entre l'image et l'élément voisin.
-Espace haut : Espace en pixel entre l'image et l'élément voisin.
(shadow:)
-Couleur : Couleur de l'ombre.
-Diffusion : Diffusion de l'ombre en pixel.
-Horizontale : Décalage de l'ombre sur le plan horizontal en pixel.
-Verticale : Décalage de l'ombre sur le plan vertical en pixel.
-Diffusion : Diffusion de l'ombre en pixel.
-Horizontale : Décalage de l'ombre sur le plan horizontal en pixel.
-Verticale : Décalage de l'ombre sur le plan vertical en pixel.
Dernière mise à jour
OnLine
IP :
YourIP