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

Mostrar parámetros

Parámetros Nunjucks del componente: "Tooltip"

              params:
- name: id
  type: string
  required: true
  description: The id of the tooltip
- name: text
  type: string
  required: true
  description: If `html` is set, this is not required. Text to use within the tooltip. If `html` is provided, the `text` argument will be ignored.
- name: html
  type: string
  required: true
  description: If `text` is set, this is not required. HTML to use within the tooltip. If `html` is provided, the `text` argument will be ignored.
- name: icon
  type: object
  required: false
  description: This is the icon at right
  - name: html
    type: string
    required: false
    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
  - name: type
    type: string
    required: false
    description: Predefined icon types are `question`, `info` and `alert`. Defaults to `question`.
- name: complex
  type: boolean
  required: false
  description: Use as `true` if the tooltip content has long texts. This way the content will be read with aria-describedby instead of aria-labelledby, so it will be more verbose.
- name: classes
  type: string
  required: false
  description: Classes to add to the tooltip component.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the tooltip component.
- name: caller
  type: nunjucks-block
  required: true
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.

Por defecto (sólo icono) #

Mostrar código

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  %}

HTML

<!-- tooltip -->
<div id="example-default" data-module="c-tooltip">
  <div id="example-default-button" data-module="c-tooltip-button" class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="example-default-button example-default-tooltip">
    <span class="inline-block">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Ayuda">
        <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>
  </div>
  <div id="example-default-tooltip" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white" data-module="c-tooltip-tooltip">
    <p class='c-paragraph-base mb-0'>Esto es un tooltip</p>
  </div>
</div>
<!-- /tooltip -->

Sólo texto #

Sólo texto

Esto es un tooltip

Mostrar código

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  %}

HTML

<!-- tooltip -->
<div id="example-text" data-module="c-tooltip">
  <div id="example-text-button" data-module="c-tooltip-button" class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="example-text-button example-text-tooltip">
    <p>
      Sólo texto
    </p>
  </div>
  <div id="example-text-tooltip" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white" data-module="c-tooltip-tooltip">
    <p class='c-paragraph-base mb-0'>Esto es un tooltip</p>
  </div>
</div>
<!-- /tooltip -->

Con html #

Sólo html con icono custom a la izquierda

Mostrar código

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  %}

HTML

<!-- tooltip -->
<div id="example-html" data-module="c-tooltip">
  <div id="example-html-button" data-module="c-tooltip-button" class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="example-html-button example-html-tooltip">
    <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>
  </div>
  <div id="example-html-tooltip" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white" data-module="c-tooltip-tooltip">
    <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>
  </div>
</div>
<!-- /tooltip -->

Pregunta #

Pregunta

Mostrar código

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  %}

HTML

<!-- tooltip -->
<div id="example-question" data-module="c-tooltip">
  <div id="example-question-button" data-module="c-tooltip-button" class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="example-question-button example-question-tooltip">
    <p>
      Pregunta
    </p>
    <span class="inline-block w-1.5"></span>
    <span class="inline-block">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Ayuda">
        <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>
  </div>
  <div id="example-question-tooltip" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white" data-module="c-tooltip-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /tooltip -->

Info #

Información

Mostrar código

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  %}

HTML

<!-- tooltip -->
<div id="example-info" data-module="c-tooltip">
  <div id="example-info-button" data-module="c-tooltip-button" class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="example-info-button example-info-tooltip">
    <p>
      Información
    </p>
    <span class="inline-block w-1.5"></span>
    <span class="inline-block">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Información">
        <path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor" />
      </svg>
    </span>
  </div>
  <div id="example-info-tooltip" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white" data-module="c-tooltip-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /tooltip -->

Alerta #

Alerta

Mostrar código

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  %}

HTML

<!-- tooltip -->
<div id="example-alert" data-module="c-tooltip" class="text-alert-base">
  <div id="example-alert-button" data-module="c-tooltip-button" class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="example-alert-button example-alert-tooltip">
    <p>
      Alerta
    </p>
    <span class="inline-block w-1.5"></span>
    <span class="inline-block">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" role="img" aria-label="Alerta">
        <path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor" />
      </svg>
    </span>
  </div>
  <div id="example-alert-tooltip" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white" data-module="c-tooltip-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /tooltip -->

Icono personalizado #

Icono personalizado

Mostrar código

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  %}

HTML

<!-- tooltip -->
<div id="example-custom-icon" data-module="c-tooltip" class="text-neutral-dark">
  <div id="example-custom-icon-button" data-module="c-tooltip-button" class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="example-custom-icon-button example-custom-icon-tooltip">
    <p>
      Icono personalizado
    </p>
    <span class="inline-block w-1.5"></span>
    <span class="inline-block">
      <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>
    </span>
  </div>
  <div id="example-custom-icon-tooltip" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white" data-module="c-tooltip-tooltip">
    <p class='c-paragraph-base mb-0'>1520 - Subvención para actividades de educación de personas adultas</p>
  </div>
</div>
<!-- /tooltip -->

Complejo #

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

Mostrar código

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  %}

HTML

<!-- tooltip -->
<div id="complex-html" data-module="c-tooltip">
  <div id="complex-html-button" data-module="c-tooltip-button" data-type="c-tooltip-button-complex" class="inline-flex items-center p-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="complex-html-button complex-html-tooltip">
    <span class="inline-block">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Ayuda">
        <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>
  </div>
  <div id="complex-html-tooltip" class="c-tooltip__tooltip min-w-auto! -my-xs p-sm shadow-md bg-black rounded-xs text-white" data-module="c-tooltip-tooltip">
    <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>
  </div>
</div>
<!-- /tooltip -->

Componentes Índice de páginas

Globo de ayuda

Tooltip

Por defecto (sólo icono) #

Descripción visual

Contenido

Nunjucks macro

HTML

Sólo texto #

Descripción visual

Contenido

Nunjucks macro

HTML

Con html #

Descripción visual

Contenido

Nunjucks macro

HTML

Pregunta #

Descripción visual

Contenido

Nunjucks macro

HTML

Info #

Descripción visual

Contenido

Nunjucks macro

HTML

Alerta #

Descripción visual

Contenido

Nunjucks macro

HTML

Icono personalizado #

Descripción visual

Contenido

Nunjucks macro

HTML

Complejo #

Descripción visual

Contenido

Nunjucks macro

HTML