Tooltip examples

Show params

Params

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.

default (only icon)

Esto es un tooltip

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-default",
  "icon": {
    "type": "question"
  },
  "caller": "<p class=\"c-paragraph-base mb-0\">Esto es un tooltip</p>"
})  %}
    <p class="c-paragraph-base mb-0">Esto es un tooltip</p>
{% endcall %}

Markup

<!-- tooltip -->
<div id="example-default" data-module="c-tooltip" >
  <div id="example-default-button" data-module="c-tooltip-button" class="inline-flex items-center focus:bg-warning-base focus:outline-none 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="-my-xs p-sm shadow-md bg-black rounded text-white" data-module="c-tooltip-tooltip" >
    <p class="c-paragraph-base mb-0">Esto es un tooltip</p>
  </div>
</div>
<!-- /tooltip -->

text

Sólo texto

Esto es un tooltip

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-text",
  "text": "Sólo texto",
  "caller": "<p class=\"c-paragraph-base mb-0\">Esto es un tooltip</p>"
})  %}
    <p class="c-paragraph-base mb-0">Esto es un tooltip</p>
{% endcall %}

Markup

<!-- tooltip -->
<div id="example-text" data-module="c-tooltip" >
  <div id="example-text-button" data-module="c-tooltip-button" class="inline-flex items-center focus:bg-warning-base focus:outline-none 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="-my-xs p-sm shadow-md bg-black rounded text-white" data-module="c-tooltip-tooltip" >
    <p class="c-paragraph-base mb-0">Esto es un tooltip</p>
  </div>
</div>
<!-- /tooltip -->

html

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.

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% 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>",
  "caller": "<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>"
})  %}
    <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 %}

Markup

<!-- tooltip -->
<div id="example-html" data-module="c-tooltip" >
  <div id="example-html-button" data-module="c-tooltip-button" class="inline-flex items-center focus:bg-warning-base focus:outline-none 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="-my-xs p-sm shadow-md bg-black rounded 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 -->

question

Pregunta

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-question",
  "text": "Pregunta",
  "icon": {
    "type": "question"
  },
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup

<!-- tooltip -->
<div id="example-question" data-module="c-tooltip" >
  <div id="example-question-button" data-module="c-tooltip-button" class="inline-flex items-center focus:bg-warning-base focus:outline-none 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="-my-xs p-sm shadow-md bg-black rounded 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

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-info",
  "text": "Información",
  "icon": {
    "type": "info"
  },
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup

<!-- tooltip -->
<div id="example-info" data-module="c-tooltip" >
  <div id="example-info-button" data-module="c-tooltip-button" class="inline-flex items-center focus:bg-warning-base focus:outline-none 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="-my-xs p-sm shadow-md bg-black rounded 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 -->

alert

Alerta

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-alert",
  "text": "Alerta",
  "icon": {
    "type": "alert"
  },
  "classes": "text-alert-base",
  "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>"
})  %}
    <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall %}

Markup

<!-- 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 focus:bg-warning-base focus:outline-none 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="-my-xs p-sm shadow-md bg-black rounded 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 -->

Custom icon

Custom

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

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "example-custom-icon",
  "text": "Custom",
  "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",
  "caller": "<p class=\"c-paragraph-base mb-0\">1520 - Subvención para actividades de educación de personas adultas</p>"
})  %}
    <p class="c-paragraph-base mb-0">1520 - Subvención para actividades de educación de personas adultas</p>
{% endcall %}

Markup

<!-- 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="example-custom-icon-button example-custom-icon-tooltip">
      <p>
        Custom
      </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="-my-xs p-sm shadow-md bg-black rounded 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 -->

Complex

complex : true. Use this param when the tooltip content has long texts or mixed content.

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

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/tooltip/_macro.tooltip.njk" import componentTooltip %}
{% call componentTooltip({
  "id": "complex-html",
  "icon": {
    "type": "question"
  },
  "complex": true,
  "caller": "<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>"
})  %}
    <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 %}

Markup

<!-- 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 focus:bg-warning-base focus:outline-none 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="-my-xs p-sm shadow-md bg-black rounded 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 -->