Tailwind CSS Popover - Taco Svelte

The Popover is a small overlay of content that is used to demonstrate secondary information of any component when a user clicks it. Below we are presenting an example of the Popover component that you can use in your project based on Taco. 

<Popover 
  placement="top"
>
  <Button size="md" variant="gradient" color="blue">
      Show Popover
  </Button>
  <span slot="content">
      This is a very beautiful popover, show some love.
  </span>
</Popover>

Popover Placement

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

<Popover 
  placement="top"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="top-start"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="top-end"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="right"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="right-start"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="right-end"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="left"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="left-start"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="left-end"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="bottom"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="bottom-start"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>
<Popover 
  placement="bottom-end"
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>

Popover Animation

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

<Popover 
  placement="top"
  animation
>
<Button size="md" variant="gradient" color="blue">
    Show Popover
</Button>
<span slot="content">
    This is a very beautiful popover, show some love.
</span>
</Popover>

Custom Popover 

<Popover 
  animation="false" 
  placement="top" 
>
  <Button size="md" variant="gradient" color="blue">
      Show Popover
  </Button>
  <span slot="content">
      This is a very beautiful popover, show some love.
  </span>
</Popover>