Tooltips

[aloyber]

Tooltip

Nombre en Obelisco Tooltip

Tipo de componente Molécula

Ejemplo en Bootstrap Tooltips

Ejemplo de aplicación en BA Ayuda descriptiva para un componente

¿Qué tenemos hoy en día en Obelisco? Tooltip en Estándares

[aloyber]

Requerimiento: Se necesita construir un nuevo componente en el sistema de diseño Obelisco: "Tooltip"

• Se requiere que el componente tenga múltiples posiciones para adaptarse lo mejor posible en cada tipo de página

---

Se deja una referencia como lo trabaja IBM: https://carbondesignsystem.com/components/tooltip/usage/

[aloyber]

Se creó un branch en UI KIT para la construcción del componente: https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/5ui2KdmaB2ulRZbPJUTwMb/UI-KIT---Obelisco?node-id=2265%3A12566&t=lsBcIrxEABBNAn4n-1

Imagen de referencia

• Se evaluará la posibilidad de generar una variabe para fondo oscuro/claro y documentar el comportamiento del mismo
• Se solicitará al proyecto Subsidios (RIB y PSOC) documentación gráfica que demuestre el comportamiento que se espera de los tooltip
• Se evaluará con otros sistemas de diseño el comportamiento de los fondos para el tooltip

[aloyber]

Se sube adjunta documentación visual de como se implementaron los tooltip en el proyecto subsidios:

[aloyber]

Se evaluó como trabaja el componente https://carbondesignsystem.com/components/tooltip/usage/ https://spectrum.adobe.com/page/tooltip/

[aloyber]

@victoriajustina @ncorralesruiz se deja el acceso a la ficha del componente para una revisión de contenido: https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/UomlJbV9f4cowU0JP3urLb/Fichas?node-id=188%3A812&t=ztOkRn2RsG8nqRpr-1

[Jesus1397]

Regla: El tooltip está diseñado con HTML y CSS, no se ajustará automáticamente a los bordes de la pantalla. Esto se debe a que el tooltip se posiciona de manera fija en relación con su elemento contenedor y no tiene la capacidad de detectar y ajustarse a los límites de la pantalla por sí mismo.

[marusaad]

¡Hola! 🥁

Actualizamos el componente aprovechando la actualización general de la guía tipográfica.

¿Qué hicimos?

• Actualizamos la plantilla del componente en la librería del UI kit.
• Actualizamos los estilos tipográficos del componente.
• Actualizamos la nomenclatura de las diferentes propiedades del componente.

¿Cómo se ve la página del componente en el UI kit?

[marusaad]

Incorporamos un ancho máximo de 288px al componente, alineándonos con desarrollo que lo tiene en 18rem.

Queda como evolutivo la variante mobile con su ancho máximo que actualmente no existe en el UI Kit.

[Diehault]

📢 Nuevo requerimiento

Issues relacionados

311

Qué

Actualizar el componente según el nuevo estilo de grillas de la v.2 de Obelisco.

Por qué

Para estandarizar tamaños, modulación y visualizaciones de todos los componentes.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

• [x] El componente se ajusta a la grilla 4px.
• [x] El componente tiene una medida definida para mobile, tablet y desktop.
• [x] El componente tiene una modulación definida para mobile, tablet y desktop.
• [x] El componente tiene su handoff para desarrollo y está marcado como ready for dev.
• [x] El componente está documentado.

🕰️ Changelog

CHANGELOG	Descripción
Agregado
Arreglado
Eliminado
Obsoleto
Cambiado

✏️ Notas

• No se realizó ningún cambio sobre el componente porque no era necesario. El width que tiene el Tooltip viene definido por una propiedad en Desarrollo.

[Diehault]

📢 Nuevo requerimiento

Qué

Actualizar los estilos de color del componente aplicando las variables correspondientes a la v2 de Obelisco.

Por qué

Porque posiciona al sistema en un nivel de calidad superior al cumplir con los criterios de accesibilidad de la WCAG, y facilita la adopción, la personalización y la escalabilidad a nivel global.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

• [x] El componente aplica las variables semánticas y funcionales para los elementos del mismo.
• [x] El componente cumple con los criterios de contraste y legibilidad de la WCAG (Criterios de accesibilidad AAA).

🕰️ Changelog

CHANGELOG	Descripción
Agregado	Actualizamos el componente incluyendo la colección de variables con la nueva paleta de colores.
Arreglado
Eliminado
Obsoleto
Cambiado

✏️ Notas

• N/A.