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.
<x-popover
text="And here's some amazing content. It's very engaging. Right?"
title="Popover title"
placement="top"
>
<x-button>Popover top</x-button>
</x-popover>
You can simply change the popover position by changing the placement=" " attribute with the following values: top, right, bottom, left.
<x-popover
text="And here's some amazing content. It's very engaging. Right?"
title="Popover title"
placement="top"
>
<x-button>Popover top</x-button>
</x-popover>
<x-popover
text="And here's some amazing content. It's very engaging. Right?"
title="Popover title"
placement="right"
>
<x-button>Popover right</x-button>
</x-popover>
<x-popover
text="And here's some amazing content. It's very engaging. Right?"
title="Popover title"
placement="bottom"
>
<x-button>Popover bottom</x-button>
</x-popover>
<x-popover
text="And here's some amazing content. It's very engaging. Right?"
title="Popover title"
placement="left"
>
<x-button>Popover left</x-button>
</x-popover>