TooltipTooltip

El componente Tooltip muestra información contextual o texto complementario sobre un elemento concreto para ayudar a entender mejor su función.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/tooltip.js';

Importa el tipo TypeScript cuando lo necesites:

import type { Tooltip } from 'mdui/components/tooltip.js';

Uso:

botón

<mdui-tooltip content="Tooltip simple">
  <mdui-button>botón</mdui-button>
</mdui-tooltip>

Ejemplos

Tooltip de texto simple

Por defecto, el tooltip es de texto simple. El atributo content define el contenido del tooltip.

botón

<mdui-tooltip content="Tooltip simple">
  <mdui-button>botón</mdui-button>
</mdui-tooltip>

Fuente

También puedes usar el slot content para establecer el contenido del tooltip.

botón

título

contenido

<mdui-tooltip>
  <mdui-button>botón</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">título</div>
    <div>contenido</div>
  </div>
</mdui-tooltip>

Fuente

Tooltip enriquecido

Si estableces el atributo variant en rich, obtendrás un Tooltip enriquecido. El atributo headline define el título y content, el contenido.

botón

<mdui-tooltip
  variant="rich"
  headline="Tooltip enriquecido"
  content="Los tooltips enriquecidos atraen la atención hacia un elemento o característica particular que merece el enfoque del usuario. Admite varias líneas de texto informativo."
>
  <mdui-button>botón</mdui-button>
</mdui-tooltip>

Fuente

También puedes usar los slots headline y content para definir el título y el contenido del tooltip. Usa el slot action para establecer el botón de acción del tooltip.

botón

Tooltip enriquecido

Los tooltips enriquecidos atraen la atención hacia un elemento o característica particular que merece el enfoque del usuario. Admite varias líneas de texto informativo.

Acción

<mdui-tooltip variant="rich">
  <mdui-button>botón</mdui-button>
  <div slot="headline">Tooltip enriquecido</div>
  <div slot="content">Los tooltips enriquecidos atraen la atención hacia un elemento o característica particular que merece el enfoque del usuario. Admite varias líneas de texto informativo.</div>
  <mdui-button slot="action" variant="text">Acción</mdui-button>
</mdui-tooltip>

Fuente

Posición

El atributo placement define la posición del tooltip.

<div class="example-placement">
  <div class="row">
    <mdui-tooltip placement="top-left" content="top-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-start" content="top-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top" content="top">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-end" content="top-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="top-right" content="top-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-start" content="left-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-start" content="right-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left" content="left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right" content="right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="left-end" content="left-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="right-end" content="right-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
  <div class="row">
    <mdui-tooltip placement="bottom-left" content="bottom-left">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-start" content="bottom-start">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom" content="bottom">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-end" content="bottom-end">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
    <mdui-tooltip placement="bottom-right" content="bottom-right">
      <mdui-card variant="outlined"></mdui-card>
    </mdui-tooltip>
  </div>
</div>

<style>
.example-placement mdui-card {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem;
}

.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
  margin-left: 10rem;
}
</style>

Fuente

Forma de activación

El atributo trigger define la forma de activación del tooltip.

botón

<mdui-tooltip trigger="click" content="tooltip">
  <mdui-button>botón</mdui-button>
</mdui-tooltip>

Fuente

Retraso de apertura/cierre

Cuando la forma de activación es hover, puedes usar los atributos open-delay y close-delay para establecer el retraso de apertura y cierre del tooltip, en milisegundos.

botón

<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
  <mdui-button>botón</mdui-button>
</mdui-tooltip>

Fuente

Estado deshabilitado

El atributo disabled deshabilita el tooltip.

botón

<mdui-tooltip disabled content="tooltip">
  <mdui-button>botón</mdui-button>
</mdui-tooltip>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Variante del tooltip. Por defecto es `plain`. Los valores posibles son: `plain`: Solo texto, adecuado para texto simple de una línea `rich`: Texto enriquecido, puede contener título, cuerpo y botones de acción
`placement`	`placement`	`'auto' \| 'top-left' \| 'top-start' \| 'top' \| 'top-end' \| 'top-right' \| 'bottom-left' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'bottom-right' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Posición del tooltip. Por defecto es `auto`. Los valores posibles son: `auto`: Determinar posición automáticamente. Cuando `variant="plain"`, se prefiere `top`; cuando `variant="rich"`, se prefiere `bottom-right` `top-left`: Arriba a la izquierda `top-start`: Arriba, alineado a la izquierda `top`: Arriba, centrado `top-end`: Arriba, alineado a la derecha `top-right`: Arriba a la derecha `bottom-left`: Abajo a la izquierda `bottom-start`: Abajo, alineado a la izquierda `bottom`: Abajo, centrado `bottom-end`: Abajo, alineado a la derecha `bottom-right`: Abajo a la derecha `left-start`: Izquierda, alineado arriba `left`: Izquierda, centrado `left-end`: Izquierda, alineado abajo `right-start`: Derecha, alineado arriba `right`: Derecha, centrado `right-end`: Derecha, alineado abajo
`open-delay`	`openDelay`	`number`	`150`
Retraso para mostrar al pasar el ratón, en milisegundos.
`close-delay`	`closeDelay`	`number`	`150`
Retraso para ocultar al pasar el ratón, en milisegundos.
`headline`	`headline`	`string`	-
Título del tooltip. Solo se puede usar cuando `variant="rich"`. También se puede establecer mediante `slot="headline"`.
`content`	`content`	`string`	-
Contenido del tooltip. También se puede establecer mediante `slot="content"`.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'hover focus'`
Modo de activación, admite múltiples valores separados por espacios. Los valores posibles son: `click`: Activar al hacer clic `hover`: Activar al pasar el ratón `focus`: Activar al recibir el foco `manual`: Solo se puede abrir y cerrar mediante programación, no se pueden especificar otras formas de activación
`disabled`	`disabled`	`boolean`	`false`
Indica si el tooltip está deshabilitado.
`open`	`open`	`boolean`	`false`
Indica si se muestra el tooltip.

Eventos

Nombre
`open`
Se dispara cuando el tooltip comienza a mostrarse. Se puede evitar que se abra llamando a `event.preventDefault()`.
`opened`
Se dispara cuando la animación de mostrar del tooltip se completa.
`close`
Se dispara cuando el tooltip comienza a ocultarse. Se puede evitar que se cierre llamando a `event.preventDefault()`.
`closed`
Se dispara cuando la animación de ocultar del tooltip se completa.

Slots

Nombre
(predeterminado)
Elemento objetivo del tooltip, solo el primer elemento del slot `default` se usa como elemento objetivo.
`headline`
Título del tooltip, solo es válido cuando `variant="rich"`.
`content`
Contenido del tooltip, puede contener HTML. Si solo contiene texto sin formato, se puede usar el atributo `content` en su lugar.
`action`
Botones en la parte inferior del tooltip, solo es válido cuando `variant="rich"`.

CSS Parts

Nombre
`popup`
Contenedor del tooltip.
`headline`
Título.
`content`
Cuerpo.
`action`
Botón de acción.

CSS Custom Properties

Nombre
`--shape-corner-plain`
Cuando variant="plain", tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
`--shape-corner-rich`
Cuando variant="rich", tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
`--z-index`
Valor CSS `z-index` del componente.

Capítulo anterior

TextField Campo de texto

Capítulo siguiente

TopAppBar Top App Bar