hover for test

Preview

top

bottom

left

right

Code

<script lang="ts">
  import { Tooltip } from "@fefade-ui/svelte"

  const positions = ["top", "bottom", "left", "right"] as const
</script>

<div
  style="
  max-width: 300px;
  margin: 5rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  "
>
  {#each positions as position (position)}
    <Tooltip label={position} {position}>
      <p>{position}</p>
    </Tooltip>
  {/each}
</div>

Props

Prop	Type	Default	Description
label	string	—	The text or content shown inside the tooltip.
position	"top" | "bottom" | "left" | "right"	"top"	The placement of the tooltip relative to its target element.
delay	number	0	Delay in milliseconds before the tooltip appears after hover.
disabled	boolean	false	If true, the tooltip will not be shown.
class	string	—	Custom CSS classes for styling the tooltip container.
style	string	—	Inline styles applied to the tooltip container.