Popover

The Popover is a toggled on hover layout for any toggler element & content.

Wrap an element by a container with the popover class. And add a container with the popover-container next to the element. You can use Cards component inside the popover-container.

Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.

<script>
    import { Button, Card, Popover } from 'svelte-spectre'
</script>

<Popover side="right">
    <Button variant="primary">right popover</Button>
    <Card slot="content" clear>
        <h5 slot="title">Apple</h5>
        <div slot="subtitle" class="text-gray">Software and hardware</div>
        <p>To make a contribution to the world by making tools for the mind that advance humankind.</p>
        <div slot="footer">
            <Button variant="primary">Buy</Button>
        </div>
    </Card>
</Popover>