<Popover label="left" position="left">
  <Button icon={ArrowLeft} aria-label="left" />
</Popover>
<Popover label="top" position="top">
  <Button icon={ArrowUp} aria-label="top" />
</Popover>
<Popover label="right" position="right">
  <Button icon={ArrowRight} aria-label="right" />
</Popover>
<Popover label="bottom" position="bottom">
  <Button icon={ArrowDown} aria-label="bottom" />
</Popover>

<Popover label="primary" type="primary">
  <Button type="primary">primary</Button>
</Popover>
<Popover label="secondary" type="secondary">
  <Button type="secondary">secondary</Button>
</Popover>
<Popover label="success" type="success">
  <Button type="success">success</Button>
</Popover>
<Popover label="warning" type="warning">
  <Button type="warning">warning</Button>
</Popover>
<Popover label="danger" type="danger">
  <Button type="danger">danger</Button>
</Popover>

<script>
  let showPopover = false;
</script>

<div>
  <Switch bind:checked={showPopover}>Show</Switch>
</div>

<Popover label="hey"
         active={showPopover}>
  Toggle me
</Popover>
<Popover label="hey"
         always>
  Always showing
</Popover>