Al crear un Tooltip, elegirás un elemento en tu sitio web como objetivo. 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.
El desplazamiento superior y el desplazamiento izquierdo del Tooltip deben establecerse entre -1000 y 1000 píxeles. Si alguno de los desplazamientos está fuera del rango de -1000 a 1000 píxeles, guardar el Tooltip falla, y el creador de Tooltip puede mostrar solo un banner genérico de error sin mensaje específico. Para solucionar este fallo, cambia ambos desplazamientos para que estén dentro del rango y guarda el Tooltip nuevamente.
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 seleccionaste podría tener anchos fijos aplicados por tus desarrolladores. En este caso, incrustar un Tooltip puede no renderizarse 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 - El renderizado puede parecer correcto en el creador de Tooltip pero no como esperas al previsualizar o probar en el entorno en vivo. En este caso, suele haber 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, solo chatea con nosotros en Messenger y te ayudaremos.