Al crear un Tooltip, elegirás un elemento en tu sitio web para apuntar. Intercom luego usa selectores CSS para identificar los elementos que has elegido.
Como no hay dos sitios web iguales, hemos añadido varias funciones de diseño que te ayudarán a ofrecer la mejor experiencia a tus end-users. Esto asegura que el Tooltip se vea nativo en tu aplicación y no interfiera con la experiencia de usuario que has diseñado.
Diseño superpuesto vs. incrustado
Al elegir un diseño, primero debes considerar cómo se insertará el Tooltip en tu página web.
Esto se puede hacer seleccionando una de las dos opciones de diseño:
Superpuesto - Superpone el Tooltip sobre los elementos existentes en la página.
Incrustado - Se posiciona en línea y mueve los elementos en la página para hacer espacio.
Alineación del Tooltip
La alineación seleccionada determinará cómo se posiciona el Tooltip en relación con el elemento que has seleccionado, dándote mayor control sobre dónde aparece el Tooltip.
Hay 3 opciones de alineación para elegir:
Texto en el elemento - Se alinea al texto si existe dentro del elemento.
Dentro del elemento - Se alinea (por defecto) al lado derecho del elemento.
Al lado del elemento - Se alinea (por defecto) fuera del elemento en el lado derecho.
Refina aún más la alineación usando las opciones para mover la alineación del Tooltip a la izquierda, derecha, arriba, abajo o al centro. Usa estos controles si quieres mover el Tooltip de las posiciones predeterminadas.
Desplazamiento
Para ese último ajuste, los controles de desplazamiento te permiten mover el tooltip a la izquierda o derecha, arriba o abajo. Son especialmente útiles cuando quieres acercarte o alejarte del elemento que deseas resaltar con el Tooltip.
Qué hacer si no puedes posicionar correctamente el Tooltip
Si aún tienes problemas para posicionar correctamente el Tooltip, puede haber algunos factores que valga la pena considerar:
¿Tu producto tiene elementos con anchos fijos? - El elemento que has seleccionado podría tener anchos fijos aplicados por tus desarrolladores. En este caso, incrustar un Tooltip puede no mostrarse como esperas. Intenta hablar con tu equipo de desarrolladores para revisar el HTML y CSS de la página web.
Tu producto usa clases generadas dinámicamente - La renderización puede parecer correcta en el constructor de Tooltip pero no como esperas al previsualizar o probar en el entorno en vivo. En este caso, a menudo hay contenido dinámico que cambia el diseño de la página y mueve el Tooltip a una posición inesperada.
Intenta solucionar estos problemas eligiendo manualmente el selector CSS.
¿Tienes preguntas?
Si tienes más preguntas sobre cómo editar un Tooltip, simplemente chatea con nosotros en Messenger y te ayudaremos.