desy-html

Tooltip

Parámetros Nunjucks del componente: "Tooltip". Versión: 12.0.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: id\n  type: string\n  required: true\n  description: The id of the tooltip\n- name: text\n  type: string\n  required: true\n  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.\n- name: html\n  type: string\n  required: true\n  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.\n- name: icon\n  type: object\n  required: false\n  description: This is the icon at right\n  - name: html\n    type: string\n    required: false\n    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.\n  - name: type\n    type: string\n    required: false\n    description: Predefined icon types are `question`, `info` and `alert`. Defaults to `question`.\n- name: complex\n  type: boolean\n  required: false\n  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.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the tooltip component.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the tooltip component.\n- name: caller\n  type: nunjucks-block\n  required: true\n  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.","length":1764}

Por defecto (sólo icono)

Ejemplo: "Por defecto (sólo icono)", de código HTML, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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" aria-describedby="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 -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 -->

Ejemplo: "Por defecto (sólo icono)", de código Nunjucks, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Sólo texto", de código HTML, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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" aria-describedby="example-text-tooltip">
    <p>
      Sólo texto
    </p>
  </div>
  <div id="example-text-tooltip" class="c-tooltip__tooltip -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 -->

Ejemplo: "Sólo texto", de código Nunjucks, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Con html", de código HTML, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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" aria-describedby="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 -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 -->

Ejemplo: "Con html", de código Nunjucks, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Pregunta", de código HTML, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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" aria-describedby="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 -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 -->

Ejemplo: "Pregunta", de código Nunjucks, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Info", de código HTML, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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" aria-describedby="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 -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 -->

Ejemplo: "Info", de código Nunjucks, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Alerta", de código HTML, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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" aria-describedby="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 -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 -->

Ejemplo: "Alerta", de código Nunjucks, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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

Ejemplo: "Icono personalizado", de código HTML, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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" aria-describedby="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 -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 -->

Ejemplo: "Icono personalizado", de código Nunjucks, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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.

Ejemplo: "Complejo", de código HTML, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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" aria-describedby="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 -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 -->

Ejemplo: "Complejo", de código Nunjucks, para maquetar el componente: "Tooltip", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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