DESY

Sistema de Diseño del Gobierno de Aragón

Globo de ayuda

Mostrar y ocultar

El globo de ayuda o tooltip ofrece información de un elemento al pasar el ratón sobre él o bien cuando el elemento está en focus.

Tooltip

Por defecto (sólo icono)

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título "por defecto (sólo icono)" en texto negro de peso normal. Icono circular azul con símbolo de información en color blanco centrado.

Esto es un tooltip

Mostrar códigodel ejemplo: Por defecto (sólo icono)

Contenido

Nunjucks macro

{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-default",
  "icon": {
    "type": "question"
  }
}) %}
<p class='c-paragraph-base mb-0'>Esto es un tooltip</p>
{% endcall  %}

Sólo texto

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título "sólo texto" en texto negro de peso normal en la parte superior. Texto "Sólo texto" en color negro de tamaño estándar alineado a la izquierda.

Sólo texto

Esto es un tooltip

Mostrar códigodel ejemplo: Sólo texto

Contenido

Nunjucks macro

{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-text",
  "text": "Sólo texto"
}) %}
<p class='c-paragraph-base mb-0'>Esto es un tooltip</p>
{% endcall  %}

Con html

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro de 1px. Título "con html" en texto negro de peso normal en la parte superior. Fila con icono circular azul con símbolo de información seguido de texto "Sólo html con icono custom a la izquierda" en color negro.

Sólo html con icono custom a la izquierda

Si este contenido tiene texto extenso o con código, mira el ejemplo 'complex' más abajo.

Mostrar códigodel ejemplo: Con html

Contenido

Nunjucks macro

{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-html",
  "html": "<p class='inline-flex items-center'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg><span>Sólo <strong>html</strong> con icono custom a la izquierda</span></p>"
}) %}
<p class='c-paragraph-base mb-0'>Si este contenido tiene texto extenso o con código, mira el ejemplo 'complex' más abajo.</p>
{% endcall  %}

Pregunta

Descripción visual

Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en azul con ícono de información circular azul a la derecha. Padding interno visible alrededor del contenido.

Pregunta

Mostrar códigodel ejemplo: Pregunta

Contenido

Nunjucks macro

{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-question",
  "text": "Pregunta",
  "icon": {
    "type": "question"
  }
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}

Info

Descripción visual

Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en azul con ícono de información circular azul a la derecha. Padding interno visible alrededor del contenido.

Información

Mostrar códigodel ejemplo: Info

Contenido

Nunjucks macro

{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-info",
  "text": "Información",
  "icon": {
    "type": "info"
  }
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}

Alerta

Descripción visual

Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene un título en negro en peso normal arriba, seguido de un texto en rojo con ícono de advertencia triangular rojo a la derecha. Padding interno visible alrededor del contenido.

Alerta

Mostrar códigodel ejemplo: Alerta

Contenido

Nunjucks macro

{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-alert",
  "text": "Alerta",
  "icon": {
    "type": "alert"
  },
  "classes": "text-alert-base"
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}

Icono personalizado

Descripción visual

Tooltip rectangular con fondo blanco, borde gris claro de 1px, y sombra sutil. Contiene texto en color negro tamaño pequeño alineado a la izquierda, seguido de un icono cuadrado pequeño con fondo oscuro que muestra una "X" en blanco.

Icono personalizado

1520 - Subvención para actividades de educación de personas adultas

Mostrar códigodel ejemplo: Icono personalizado

Contenido

Nunjucks macro

{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-custom-icon",
  "text": "Icono personalizado",
  "icon": {
    "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-neutral-dark' role='img' aria-label='Ayuda'><path d='M140 15a15 15 0 00-15-15H15A15 15 0 000 15v110a15 15 0 0015 15h110a15 15 0 0015-15zM70 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
  },
  "classes": "text-neutral-dark"
}) %}
<p class='c-paragraph-base mb-0'>1520 - Subvención para actividades de educación de personas adultas</p>
{% endcall  %}

Complejo

Usa 'complex': true para que el contenido del tooltip tenga textos largos o contenido mixto.

Descripción visual

Tooltip rectangular con fondo blanco, borde gris claro de 1px, y sombra sutil. Presenta un icono circular azul con signo de interrogación en la esquina superior izquierda, sin texto visible adicional. Dimensiones compactas de aproximadamente 30x30 píxeles.

El código CVV se encuentra situado en la tarjeta por detrás. ¡Compruébalo!

Mostrar códigodel ejemplo: Complejo

Contenido

Nunjucks macro

{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "complex-html",
  "icon": {
    "type": "question"
  },
  "complex": true
}) %}
<p class='c-paragraph-base mb-0'>El código CVV se encuentra situado en la tarjeta por detrás. <strong>¡Compruébalo!</strong></p>
{% endcall  %}