Tailwind CSS Tooltip - Taco Svelte

The Tooltip is a small pop-up element that appears when the user moves the mouse pointer over an element. Use it when you want to specify extra information about something when the user moves the mouse pointer over an element. Below we are presenting an example of the Tooltip component that you can use in your project based on Taco. 

<Tooltip 
placement="top" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    Show Tooltip
</Button>
</Tooltip>

Tooltip Placement

You can change the position of the Tooltip component using the placement prop. 

<Tooltip 
placement="top" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    TOP
</Button>
</Tooltip>
<Tooltip 
placement="top-start" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    top-start
</Button>
</Tooltip>
<Tooltip 
placement="top-end" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    top-end
</Button>
</Tooltip>
<Tooltip 
placement="right" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    RIGHT
</Button>
</Tooltip>
<Tooltip 
placement="right-start" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    right-start
</Button>
</Tooltip>
<Tooltip 
placement="right-end" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    right-end
</Button>
</Tooltip>
<Tooltip 
placement="left" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    LEFT
</Button>
</Tooltip>
<Tooltip 
placement="left-start" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    left-start
</Button>
</Tooltip>
<Tooltip 
placement="left-end" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    left-end
</Button>
</Tooltip>
<Tooltip 
placement="bottom" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    BOTTOM
</Button>
</Tooltip>
<Tooltip 
placement="bottom-start" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    bottom-start
</Button>
</Tooltip>
<Tooltip 
placement="bottom-end" 
label="Taco"
>
<Button size="md" variant="gradient" color="blue">
    bottom-end
</Button>
</Tooltip>

Tooltip Animation

You can use animation on the open/close state for Tooltip component using the animate prop. 

<Tooltip 
placement="top" 
label="Taco"
animation
>
<Button size="md" variant="gradient" color="blue">
    Show Tooltip
</Button>
</Tooltip>

Custom Tooltip 

<Tooltip 
        animation="{false}" 
        placement="top" 
        label="Tooltip"
    >
        <Button size="md" variant="gradient" color="blue">
            Show Tooltip
        </Button>
    </Tooltip>