How do I attach a Tooltip to a target element?

Provide a children snippet that receives attrs and spread them onto your target element, e.g. a Button.

How do I add an arrow to a Tooltip?

Set the withArrow prop to true to render an arrow pointing at the target element.

Tooltip — Fluent UI Svelte

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

Uso

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

API del componente

Una breve explicación de las propiedades que realmente necesitan explicación. Puedes ver el resto de las propiedades here .

Contenido

La propiedad content especifica el contenido que se mostrará en el tooltip cuando el usuario pase el cursor sobre el elemento de destino. Puede ser una cadena, un componente de Svelte o un Snippet.

Posición

La propiedad positionConfig te permite especificar tu propia posición personalizada usando la configuración de posicionamiento de Floating UI. Esto te da más control sobre la ubicación del tooltip, permitiéndote definir offsets personalizados, middleware y más.

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.

View Code

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.

View Code

onVisibleChange

La propiedad onVisibleChange es una función callback que se ejecuta cada vez que cambia la visibilidad del tooltip. Esto te permite responder programáticamente a la apertura o cierre del tooltip.

relationship

La propiedad relationship te permite especificar la relación entre el tooltip y el elemento de destino. Esto puede usarse con fines de accesibilidad, como indicar que el tooltip es una descripción del elemento de destino.

Propiedades del componente

Name	Type	Description
`content`	`string` \| `Snippet` \| `Component`	El contenido que se mostrará en el tooltip. Puede ser una cadena, un componente de Svelte o un Snippet.
`positionConfig`	`Partial<ComputePositionConfig>`	La configuración de posición del tooltip. Esto te permite definir offsets personalizados, middleware y más.
`withArrow`	`boolean`	Si el tooltip debe mostrar una flecha apuntando hacia el elemento de destino.
`openDelay`	`number`	El retraso, en milisegundos, antes de que el tooltip se muestre después de que el usuario pase el cursor sobre el elemento de destino.
`hideDelay`	`number`	El retraso, en milisegundos, antes de que el tooltip se oculte después de que el usuario deje de pasar el cursor sobre el elemento de destino.
`onVisibleChange`	`(visible: boolean) => void`	Una función callback que se ejecuta cada vez que cambia la visibilidad del tooltip.
`element`	`HTMLElement`	La referencia DOM del elemento tooltip.
Element Attributes		Todos los demás atributos que se pueden aplicar al elemento tooltip.