Tooltip

Un tooltip muestra información adicional sobre otro componente. La información se muestra encima y cerca del componente de destino.

Uso

Usa un snippet children para recibir los atributos de accesibilidad del tooltip y aplicarlos sobre el elemento de destino. El snippet también recibe un attachment como segundo argumento, que puedes aplicar al elemento que debe actuar como disparador.

<script>
	import { Tooltip, Button } from 'fluentui-svelte';
</script>

<Tooltip content="Tooltip content" relationship="description" withArrow>
	{#snippet children(attrs)}
		<Button {...attrs}>Hover over me</Button>
	{/snippet}
</Tooltip>

También puedes pasar el elemento de destino directamente como hijo. En ese caso el tooltip se asocia al siguiente elemento renderizado, pero no se aplican los atributos de accesibilidad.

<script>
	import { Tooltip, Button } from 'fluentui-svelte';
</script>

<Tooltip content="Tooltip content" relationship="description" withArrow>
  <Button>Hover over me</Button>
</Tooltip>

API del componente

Una breve explicación de las props que realmente necesitan aclaración. Puedes ver el resto de las props en la sección Propiedades del componente más abajo.

Con flecha

La propiedad withArrow es un booleano que, cuando se establece en true, añade una flecha al tooltip apuntando hacia el elemento de destino. Esto puede ayudar a conectar visualmente el tooltip con el elemento que describe.

<Tooltip content="Tooltip with arrow" relationship="description" withArrow>
  {#snippet children(attrs)}
    <Button {...attrs}>With arrow</Button>
  {/snippet}
</Tooltip>

Retraso

Las propiedades openDelay y hideDelay te permiten especificar un retraso, en milisegundos, antes de que el tooltip se muestre u oculte después de que el usuario pase el cursor sobre el elemento de destino. Esto puede ayudar a evitar que el tooltip aparezca o desaparezca demasiado rápido.

<Tooltip content="Delayed tooltip" openDelay={500} hideDelay={200}>
  {#snippet children(attrs)}
    <Button {...attrs}>Delayed</Button>
  {/snippet}
</Tooltip>

Propiedades del componente