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> <template #content> This is a very beautiful popover, show some love. </template> </Popover>
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> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="top-start" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="top-end" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="right" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="right-start" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="right-end" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="left" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="left-start" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="left-end" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="bottom" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="bottom-start" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover> <Popover placement="bottom-end" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover>
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> <template #content> This is a very beautiful popover, show some love. </template> </Popover>
<Popover animation="false" placement="top" > <Button size="md" variant="gradient" color="blue"> Show Popover </Button> <template #content> This is a very beautiful popover, show some love. </template> </Popover>