desy-html

Tooltip

Mostrar parámetros

Parámetros del componente

              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)

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

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

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

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

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

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

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.

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