Tooltip (información sobre herramientas)

Capa emergente informativa activada al pasar el cursor, pulsar o enfocar. Posicionamiento fixed + volteo respecto a la ventana gráfica (flip/shift); cuando el disparador sale de la ventana gráfica, la capa se oculta automáticamente.

Información sobre herramientas

<template>
  <div class="demo-row" style="justify-content: center; padding: 56px 0 72px">
    <LhTooltip content="Información superior" placement="top">
      <LhButton>Arriba</LhButton>
    </LhTooltip>
    <LhTooltip content="Información inferior" placement="bottom">
      <LhButton>Abajo</LhButton>
    </LhTooltip>
    <LhTooltip content="Información a la izquierda" placement="left">
      <LhButton>Izquierda</LhButton>
    </LhTooltip>
    <LhTooltip content="Información a la derecha" placement="right">
      <LhButton>Derecha</LhButton>
    </LhTooltip>
    <LhTooltip content="Se activa al pulsar" trigger="click">
      <LhButton type="primary">Pulsar</LhButton>
    </LhTooltip>
    <LhTooltip content="Posicionamiento estricto según top, sin volteo" placement="top" :flip="false">
      <LhButton>Top estricto</LhButton>
    </LhTooltip>
    <LhTooltip content="Información con el color del tema" type="primary">
      <LhButton>Color del tema</LhButton>
    </LhTooltip>
  </div>
</template>

Props

Prop	Descripción	Tipo	Predeterminado
content	Contenido de la información	string	''
placement	12 posiciones	'top' \| 'top-start' \| … \| 'right-end'	'top'
flip	Voltea la dirección cuando falta espacio en el eje principal; con false se respeta estrictamente placement	boolean	true
trigger	Modo de activación	'hover' \| 'click' \| 'focus'	'hover'
manual / visible	Modo controlado manual	boolean	false / —
showAfter / hideAfter	Retraso de aparición/ocultación (ms)	number	0
openDelay / closeDelay	Alias de los retrasos de aparición/ocultación (equivalentes a showAfter/hideAfter, de menor prioridad)	number	—
effect	Tema claro u oscuro	'dark' \| 'light'	'dark'
type	Color del tema integrado (sobrescribe el fondo de effect)	'primary' \| 'success' \| …	—
bgColor	Color de fondo personalizado (máxima prioridad)	string	—
maxWidth	Anchura máxima	string \| number	'200px'
teleportTarget	Destino de montaje de la capa emergente (implementado mediante traslado DOM)	string \| HTMLElement	'body'
disabled / themeVars / bgPattern / sx	—	—	—

Events

La aparición y la ocultación las gestiona internamente la lógica de activación.

Métodos

En el modo manual se usan los métodos de instancia show() / hide() / toggle() (defineExpose).

Consejo

sx se aplica al elemento raíz del disparador (el popper ya está montado en body y no admite sx).