Popover Component

Popovers are a central part in all web and mobile application with a wide variety of usage. Explore Vulk popovers.

Components Open Docs
PlacementTriggerColorsIconsAvatars

Popover placement

Available positions


<template>
  <Popover
    content="This is a top popover"
    placement="top"
    arrow
    hover
  >
    <p class="paragraph cursor-pointer">Hover me</p>
  </Popover>
</template>

Popover trigger

Available triggers


<template>
  <Popover
    content="This is a hover popover"
    placement="top"
    arrow
    hover
  >
    <Button>Hover me</Button>
  </Popover>
</template>

Popover colors

Available colors


<template>
  <Popover
    content="This is a primary popover"
    placement="top"
    hover
    arrow
    color="primary"
  >
    <p class="paragraph cursor-pointer">Primary</p>
  </Popover>

  <Popover
    content="This is a success popover"
    placement="top"
    hover
    arrow
    color="success"
  >
    <p class="paragraph cursor-pointer">Success</p>
  </Popover>
</template>

Custom - Icons

Custom icon layout


<template>
  <Popover custom spacing="medium" arrow hover>
    <template #popover>
      <IconPopover
        icon="ion:skull-outline"
        color="danger"
        heading="Danger ahead"
        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      />
    </template>
    <p class="paragraph cursor-pointer">Hover me</p>
  </Popover>

  <Popover custom spacing="medium" arrow hover>
    <template #popover>
      <IconPopover
        icon="ion:rocket-outline"
        color="info"
        heading="Startup nation"
        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        rounded
      />
    </template>
    <p class="paragraph cursor-pointer">Hover me</p>
  </Popover>
</template>

Custom - Avatars

Custom avatar layout


<template>
  <Popover custom spacing="large" arrow hover>
    <template #popover>
      <AvatarPopover
        avatar="data:image/gif;base64,replace_with_your_image"
        heading="Helen Miller"
        subheading="Software Engineer"
        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Sed haec omittamus."
      />
    </template>
    <p class="paragraph cursor-pointer">Hover me</p>
  </Popover>

  <Popover custom spacing="large" arrow hover>
    <template #popover>
      <AvatarPopover
        avatar="data:image/gif;base64,replace_with_your_image"
        heading="Chris Wyatt"
        subheading="Frontend Developer"
        content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnis enim est natura diligens sui. Sed haec omittamus."
        squared
      />
    </template>
    <p class="paragraph cursor-pointer">Hover me</p>
  </Popover>
</template>