Tailwind CSS Tooltip - Taco Vue

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>