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.
Esto es un tooltip
{% 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 %}Esto es un tooltip
{% 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 %}Si este contenido tiene texto extenso o con código, mira el ejemplo 'complex' más abajo.
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}1520 - Subvención para actividades de educación de personas adultas
{% 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 %}Usa 'complex': true para que el contenido del tooltip tenga textos largos o contenido mixto.
El código CVV se encuentra situado en la tarjeta por detrás. ¡Compruébalo!
{% 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 %}