Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Popover

A floating card popping up when hovering, clicking, or focusing on a trigger element.

Basic Usage

Hover

<template>
  <HLPopover content-class="!p-2" trigger="hover">
    <template #trigger>
      <HLButton>Hover Me</HLButton>
    </template>
    <span>Hover popover content</span>
  </HLPopover>
</template>
<script setup>
  import { HLPopover, HLButton } from '@platform-ui/highrise'
</script>

Click

<template>
  <HLPopover content-class="!p-2" trigger="click">
    <template #trigger>
      <HLButton>Click Me</HLButton>
    </template>
    <span>Click popover content</span>
  </HLPopover>
</template>
<script setup>
  import { HLPopover, HLButton } from '@platform-ui/highrise'
</script>

Focus

<template>
  <HLPopover content-class="!p-2" trigger="focus">
    <template #trigger>
      <HLButton>Focus Me</HLButton>
    </template>
    <span>Focus popover content</span>
  </HLPopover>
</template>
<script setup>
  import { HLPopover, HLButton } from '@platform-ui/highrise'
</script>

Placement

Vue

<template>
  <HLPopover content-class="!p-2" trigger="hover" placement="right">
    <template #trigger>
      <HLButton>Hover Me</HLButton>
    </template>
    <span>Hover popover content</span>
  </HLPopover>
</template>
<script setup>
  import { HLPopover, HLButton } from '@platform-ui/highrise'
</script>

With Header and Footer

Vue

<template>
  <HLPopover content-class="!p-2" header-class="!p-2" footer-class="!p-2" trigger="click">
    <template #trigger>
      <HLButton>With Header & Footer</HLButton>
    </template>
    <template #header> Header Text </template>
    <span>Main content</span>
    <template #footer> Footer Text </template>
  </HLPopover>
</template>
<script setup>
  import { HLPopover, HLButton } from '@platform-ui/highrise'
</script>

Imports

import { HLPopover } from '@platform-ui/highrise'

Code

Vue

<HLPopover trigger="hover">
  <template #trigger>
    <HLButton>Hover Me</HLButton>
  </template>
  <span>Popover content</span>
</HLPopover>

Props

Name	Type	Default	Description
animated	boolean	true	Use animation when popping up.
arrow-point-to-center	boolean	false	Whether the arrow points to center of the trigger element.
arrow-class	string | undefined	undefined	Arrow class of the popover.
arrow-style	string | Object | undefined	undefined	Arrow style of the popover.
arrow-wrapper-class	string | undefined	undefined	Arrow class of the popover wrapper.
arrow-wrapper-style	string | Object | undefined	undefined	Arrow style of the popover wrapper.
content-class	string | undefined	undefined	Content class of the popover.
content-style	string | Object | undefined	undefined	Content style of the popover.
delay	number	100	Popover showing delay when trigger is hover.
disabled	boolean	false	Whether the popover can't be activated.
display-directive	'if' | 'show'	'if'	The conditionally render directive to show popover content. if means using v-if to render content, show means using v-show to render content.
duration	number	100	Popover vanish delay when trigger is hover.
flip	boolean	true	Whether to flip the popover when there is no space for current placement.
footer-class	string | undefined	undefined	Footer class of the popover.
footer-style	string | Object | undefined	undefined	Footer style of the popover.
header-class	string | undefined	undefined	Header class of the popover.
header-style	string | Object | undefined	undefined	Header style of the popover.
keep-alive-on-hover	boolean	true	Whether to keep popover shown when hover on popover itself with trigger="hover".
overlap	boolean	false	Overlap trigger element.
placement	'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' |	'top'	Popover placement.
raw	boolean	false	Whether to use no default styles.
scrollable	boolean	false	Whether the popover's content is scrollable.
show-arrow	boolean	true	Whether to show arrow if set.
show	boolean | undefined	undefined	Whether to show popover.
to	string | HTMLElement | false	'body'	Container node of the popover content. false will keep it at trigger container.
trigger	'hover' | 'click' | 'focus' | 'manual'	'hover'	The popover trigger type.
width	number | 'trigger' | undefined	undefined	'trigger' means popover's width will follow its trigger's width.
x	number | undefined	undefined	The CSS left pixel value when popover manually positioned (x, y need to be set together).
y	number | undefined	undefined	The CSS top pixel value when popover manually positioned (x, y need to be set together).
z-index	number | undefined	undefined	The z-index of the popover.
on-clickoutside	(e: MouseEvent) => void	undefined	Callback function triggered when clickoutside.
on-update:show	(value: boolean) => void	undefined	Callback on show status changes.

Slots

Name	Parameters	Description
trigger	()	The trigger element
header	()	Header content
default	()	Main content
footer	()	Footer content

Methods

Name	Parameters	Description
setShow	(show: boolean)	Programmatically show/hide popover
syncPosition	()	Manually sync popover position