Lors de la création d'un Tooltip, vous choisirez un élément sur votre site web à cibler. Intercom utilise ensuite des sélecteurs CSS pour identifier les éléments que vous avez choisis.
Comme aucun site web n'est identique, nous avons ajouté plusieurs fonctionnalités de disposition qui vous aideront à offrir la meilleure expérience à vos end-users. Cela garantit que le Tooltip semble natif à votre application et n'interfère pas avec l'expérience utilisateur que vous avez conçue.
Disposition superposée vs. intégrée
Lors du choix d'une disposition, vous devez d'abord considérer comment le Tooltip sera inséré dans votre page web.
Cela peut se faire en sélectionnant l'une des deux options de disposition :
Superposé - Superpose le Tooltip par-dessus les éléments existants sur la page.
Intégré - Est positionné en ligne et déplace les éléments sur la page pour faire de la place.
Alignement du Tooltip
L'alignement sélectionné déterminera comment le Tooltip est positionné par rapport à l'élément que vous avez choisi, vous donnant un meilleur contrôle sur l'emplacement d'apparition du Tooltip.
Il y a 3 options d'alignement à choisir :
Texte dans l'élément - S'aligne sur le texte s'il existe dans l'élément.
À l'intérieur de l'élément - S'aligne (par défaut) sur le côté droit de l'élément.
À côté de l'élément - S'aligne (par défaut) à l'extérieur de l'élément sur le côté droit.
Affinez davantage l'alignement en utilisant les options pour déplacer l'alignement du Tooltip à gauche, droite, haut, bas ou milieu. Utilisez ces contrôles si vous souhaitez déplacer le Tooltip des positions par défaut.
Décalage
Pour ce dernier ajustement, les contrôles de décalage vous permettent de déplacer le tooltip à gauche ou à droite, en haut ou en bas. Ils sont particulièrement utiles lorsque vous souhaitez vous rapprocher ou vous éloigner de l'élément que vous souhaitez mettre en évidence avec le Tooltip.
Que faire si vous ne parvenez pas à positionner correctement le Tooltip
Si vous avez encore du mal à positionner correctement le Tooltip, il y a quelques facteurs à considérer :
Votre produit a-t-il des éléments avec des largeurs fixes - L'élément que vous avez sélectionné pourrait avoir des largeurs fixes appliquées par vos développeurs. Dans ce cas, intégrer un Tooltip peut ne pas s'afficher comme prévu. Essayez de parler avec votre équipe de développeurs pour examiner le HTML et le CSS de la page web.
Votre produit utilise des classes générées dynamiquement - Le rendu peut sembler correct dans le constructeur de Tooltip mais pas comme prévu lors de l'aperçu ou du test en environnement réel. Dans ce cas, il y a souvent un contenu dynamique qui modifie la disposition de la page et déplace le Tooltip à une position inattendue.
Essayez de résoudre ces problèmes en choisissant manuellement le sélecteur CSS.
Des questions ?
Si vous avez d'autres questions sur l'édition d'un Tooltip, discutez simplement avec nous dans le Messenger et nous vous aiderons.