Popover

A popover is a small overlay window that provides additional information about an on-screen element.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-popover	--pf-v6-c-popover--FontSize	0.75rem
--pf-v6-c-popover--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-popover	--pf-v6-c-popover--MinWidth	calc(1rem + 1rem + 18.75rem)
--pf-v6-c-popover--MinWidth calc(--pf-v6-c-popover__content--PaddingInlineStart + --pf-v6-c-popover__content--PaddingInlineEnd + 18.75rem) calc(--pf-t--global--spacer--md + --pf-t--global--spacer--md + 18.75rem) calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--300 + 18.75rem) calc(1rem + 1rem + 18.75rem)
	.pf-v6-c-popover	--pf-v6-c-popover--MaxWidth	calc(1rem + 1rem + 18.75rem)
--pf-v6-c-popover--MaxWidth calc(--pf-v6-c-popover__content--PaddingInlineStart + --pf-v6-c-popover__content--PaddingInlineEnd + 18.75rem) calc(--pf-t--global--spacer--md + --pf-t--global--spacer--md + 18.75rem) calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--300 + 18.75rem) calc(1rem + 1rem + 18.75rem)
	.pf-v6-c-popover	--pf-v6-c-popover--BoxShadow	0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
--pf-v6-c-popover--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
	.pf-v6-c-popover	--pf-v6-c-popover--BorderWidth	0px
--pf-v6-c-popover--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-popover	--pf-v6-c-popover--BorderColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-popover--BorderColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)
	.pf-v6-c-popover	--pf-v6-c-popover--BorderRadius	16px
--pf-v6-c-popover--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover	--pf-v6-c-popover--m-danger__title-icon--Color	(In light theme) #b1380b
--pf-v6-c-popover--m-danger__title-icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-popover	--pf-v6-c-popover--m-warning__title-icon--Color	(In light theme) #dca614
--pf-v6-c-popover--m-warning__title-icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-popover	--pf-v6-c-popover--m-success__title-icon--Color	(In light theme) #3d7317
--pf-v6-c-popover--m-success__title-icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-popover	--pf-v6-c-popover--m-info__title-icon--Color	(In light theme) #5e40be
--pf-v6-c-popover--m-info__title-icon--Color --pf-t--global--icon--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-popover	--pf-v6-c-popover--m-custom__title-icon--Color	(In light theme) #147878
--pf-v6-c-popover--m-custom__title-icon--Color --pf-t--global--icon--color--status--custom--default --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878
	.pf-v6-c-popover	--pf-v6-c-popover__content--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-popover__content--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-popover	--pf-v6-c-popover__content--PaddingBlockStart	1rem
--pf-v6-c-popover__content--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-popover	--pf-v6-c-popover__content--PaddingInlineEnd	1rem
--pf-v6-c-popover__content--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-popover	--pf-v6-c-popover__content--PaddingBlockEnd	1rem
--pf-v6-c-popover__content--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-popover	--pf-v6-c-popover__content--PaddingInlineStart	1rem
--pf-v6-c-popover__content--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-popover	--pf-v6-c-popover__content--BorderRadius	16px
--pf-v6-c-popover__content--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--Width	0.9375rem
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--Height	0.9375rem
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--BoxShadow	0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
--pf-v6-c-popover__arrow--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 4px 10px 0px rgb(41, 41, 41, 0.1500)
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-popover__arrow--BackgroundColor --pf-t--global--background--color--floating--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-top--TranslateX	-50%
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-top--TranslateY	50%
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-top--Rotate	45deg
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-right--TranslateX	-50%
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-right--TranslateY	-50%
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-right--Rotate	45deg
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-bottom--TranslateX	-50%
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-bottom--TranslateY	-50%
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-bottom--Rotate	45deg
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-left--TranslateX	50%
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-left--TranslateY	-50%
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-left--Rotate	45deg
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart	16px
--pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd	16px
--pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-block-left--InsetInlineStart	16px
--pf-v6-c-popover__arrow--m-block-left--InsetInlineStart --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover	--pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd	16px
--pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover	--pf-v6-c-popover__close--InsetBlockStart	calc(1rem - 0.5rem)
--pf-v6-c-popover__close--InsetBlockStart calc(--pf-v6-c-popover__content--PaddingBlockStart - --pf-t--global--spacer--control--vertical--plain) calc(--pf-t--global--spacer--md - --pf-t--global--spacer--sm) calc(--pf-t--global--spacer--300 - --pf-t--global--spacer--200) calc(1rem - 0.5rem)
	.pf-v6-c-popover	--pf-v6-c-popover__close--InsetInlineEnd	1rem
--pf-v6-c-popover__close--InsetInlineEnd --pf-v6-c-popover__content--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-popover	--pf-v6-c-popover__close--sibling--PaddingInlineEnd	3rem
--pf-v6-c-popover__close--sibling--PaddingInlineEnd --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-popover	--pf-v6-c-popover__header--MarginBlockEnd	0.5rem
--pf-v6-c-popover__header--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-popover	--pf-v6-c-popover__title-text--Color	(In light theme) #151515
--pf-v6-c-popover__title-text--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-popover	--pf-v6-c-popover__title-text--FontWeight	600
--pf-v6-c-popover__title-text--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 600
	.pf-v6-c-popover	--pf-v6-c-popover__title-text--FontSize	0.875rem
--pf-v6-c-popover__title-text--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-popover	--pf-v6-c-popover__title-icon--MarginInlineEnd	0.5rem
--pf-v6-c-popover__title-icon--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-popover	--pf-v6-c-popover__title-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-popover__title-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-popover	--pf-v6-c-popover__title-icon--FontSize	0.875rem
--pf-v6-c-popover__title-icon--FontSize --pf-t--global--icon--size--font--body--default --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-popover	--pf-v6-c-popover__footer--MarginBlockStart	1rem
--pf-v6-c-popover__footer--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-popover.pf-m-no-padding	--pf-v6-c-popover__content--PaddingBlockStart	0px
	.pf-v6-c-popover.pf-m-no-padding	--pf-v6-c-popover__content--PaddingInlineEnd	0px
	.pf-v6-c-popover.pf-m-no-padding	--pf-v6-c-popover__content--PaddingBlockEnd	0px
	.pf-v6-c-popover.pf-m-no-padding	--pf-v6-c-popover__content--PaddingInlineStart	0px
	.pf-v6-c-popover.pf-m-width-auto	--pf-v6-c-popover--MinWidth	auto
	.pf-v6-c-popover.pf-m-width-auto	--pf-v6-c-popover--MaxWidth	none
	.pf-v6-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)	--pf-v6-c-popover__arrow--InsetBlockEnd	undefined, 0
--pf-v6-c-popover__arrow--InsetBlockEnd var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0) undefined, 0
	.pf-v6-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)	--pf-v6-c-popover__arrow--InsetInlineStart	undefined, 50%
--pf-v6-c-popover__arrow--InsetInlineStart var(--pf-v6-c-popover--m-top--InsetInlineStart, 50%) undefined, 50%
	.pf-v6-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)	--pf-v6-c-popover__arrow--TranslateX	-50%
--pf-v6-c-popover__arrow--TranslateX --pf-v6-c-popover__arrow--m-top--TranslateX -50%
	.pf-v6-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)	--pf-v6-c-popover__arrow--TranslateY	50%
--pf-v6-c-popover__arrow--TranslateY --pf-v6-c-popover__arrow--m-top--TranslateY 50%
	.pf-v6-c-popover:is(.pf-m-top, .pf-m-top-left, .pf-m-top-right)	--pf-v6-c-popover__arrow--Rotate	45deg
--pf-v6-c-popover__arrow--Rotate --pf-v6-c-popover__arrow--m-top--Rotate 45deg
	.pf-v6-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)	--pf-v6-c-popover__arrow--InsetBlockStart	undefined, 0
--pf-v6-c-popover__arrow--InsetBlockStart var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0) undefined, 0
	.pf-v6-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)	--pf-v6-c-popover__arrow--InsetInlineStart	undefined, 50%
--pf-v6-c-popover__arrow--InsetInlineStart var(--pf-v6-c-popover--m-bottom--InsetInlineStart, 50%) undefined, 50%
	.pf-v6-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)	--pf-v6-c-popover__arrow--TranslateX	-50%
--pf-v6-c-popover__arrow--TranslateX --pf-v6-c-popover__arrow--m-bottom--TranslateX -50%
	.pf-v6-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)	--pf-v6-c-popover__arrow--TranslateY	-50%
--pf-v6-c-popover__arrow--TranslateY --pf-v6-c-popover__arrow--m-bottom--TranslateY -50%
	.pf-v6-c-popover:is(.pf-m-bottom, .pf-m-bottom-left, .pf-m-bottom-right)	--pf-v6-c-popover__arrow--Rotate	45deg
--pf-v6-c-popover__arrow--Rotate --pf-v6-c-popover__arrow--m-bottom--Rotate 45deg
	.pf-v6-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)	--pf-v6-c-popover__arrow--InsetBlockStart	undefined, 50%
--pf-v6-c-popover__arrow--InsetBlockStart var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%) undefined, 50%
	.pf-v6-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)	--pf-v6-c-popover__arrow--InsetInlineEnd	undefined, 0
--pf-v6-c-popover__arrow--InsetInlineEnd var(--pf-v6-c-popover--m-left--InsetInlineEnd, 0) undefined, 0
	.pf-v6-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)	--pf-v6-c-popover__arrow--TranslateX	50%
--pf-v6-c-popover__arrow--TranslateX --pf-v6-c-popover__arrow--m-left--TranslateX 50%
	.pf-v6-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)	--pf-v6-c-popover__arrow--TranslateY	-50%
--pf-v6-c-popover__arrow--TranslateY --pf-v6-c-popover__arrow--m-left--TranslateY -50%
	.pf-v6-c-popover:is(.pf-m-left, .pf-m-left-top, .pf-m-left-bottom)	--pf-v6-c-popover__arrow--Rotate	45deg
--pf-v6-c-popover__arrow--Rotate --pf-v6-c-popover__arrow--m-left--Rotate 45deg
	.pf-v6-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)	--pf-v6-c-popover__arrow--InsetBlockStart	undefined, 50%
--pf-v6-c-popover__arrow--InsetBlockStart var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%) undefined, 50%
	.pf-v6-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)	--pf-v6-c-popover__arrow--InsetInlineStart	undefined, 0
--pf-v6-c-popover__arrow--InsetInlineStart var(--pf-v6-c-popover--m-right--InsetInlineStart, 0) undefined, 0
	.pf-v6-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)	--pf-v6-c-popover__arrow--TranslateX	-50%
--pf-v6-c-popover__arrow--TranslateX --pf-v6-c-popover__arrow--m-right--TranslateX -50%
	.pf-v6-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)	--pf-v6-c-popover__arrow--TranslateY	-50%
--pf-v6-c-popover__arrow--TranslateY --pf-v6-c-popover__arrow--m-right--TranslateY -50%
	.pf-v6-c-popover:is(.pf-m-right, .pf-m-right-top, .pf-m-right-bottom)	--pf-v6-c-popover__arrow--Rotate	45deg
--pf-v6-c-popover__arrow--Rotate --pf-v6-c-popover__arrow--m-right--Rotate 45deg
	.pf-v6-c-popover:is(.pf-m-left-top, .pf-m-right-top)	--pf-v6-c-popover__arrow--InsetBlockStart	16px
--pf-v6-c-popover__arrow--InsetBlockStart --pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover:is(.pf-m-left-top, .pf-m-right-top)	--pf-v6-c-popover__arrow--TranslateY	50%
--pf-v6-c-popover__arrow--TranslateY --pf-v6-c-popover__arrow--m-top--TranslateY 50%
	.pf-v6-c-popover:is(.pf-m-left-bottom, .pf-m-right-bottom)	--pf-v6-c-popover__arrow--InsetBlockStart	auto
	.pf-v6-c-popover:is(.pf-m-left-bottom, .pf-m-right-bottom)	--pf-v6-c-popover__arrow--InsetBlockEnd	16px
--pf-v6-c-popover__arrow--InsetBlockEnd --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover:is(.pf-m-top-left, .pf-m-bottom-left)	--pf-v6-c-popover__arrow--InsetInlineStart	16px
--pf-v6-c-popover__arrow--InsetInlineStart --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover:is(.pf-m-top-left, .pf-m-bottom-left)	--pf-v6-c-popover__arrow--TranslateX	50%
--pf-v6-c-popover__arrow--TranslateX --pf-v6-c-popover__arrow--m-left--TranslateX 50%
	.pf-v6-c-popover:is(.pf-m-top-right, .pf-m-bottom-right)	--pf-v6-c-popover__arrow--InsetInlineEnd	16px
--pf-v6-c-popover__arrow--InsetInlineEnd --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-popover:is(.pf-m-top-right, .pf-m-bottom-right)	--pf-v6-c-popover__arrow--InsetInlineStart	auto
	.pf-v6-c-popover.pf-m-danger	--pf-v6-c-popover__title-icon--Color	(In light theme) #b1380b
--pf-v6-c-popover__title-icon--Color --pf-v6-c-popover--m-danger__title-icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-popover.pf-m-warning	--pf-v6-c-popover__title-icon--Color	(In light theme) #dca614
--pf-v6-c-popover__title-icon--Color --pf-v6-c-popover--m-warning__title-icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-popover.pf-m-success	--pf-v6-c-popover__title-icon--Color	(In light theme) #3d7317
--pf-v6-c-popover__title-icon--Color --pf-v6-c-popover--m-success__title-icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-popover.pf-m-custom	--pf-v6-c-popover__title-icon--Color	(In light theme) #147878
--pf-v6-c-popover__title-icon--Color --pf-v6-c-popover--m-custom__title-icon--Color --pf-t--global--icon--color--status--custom--default --pf-t--global--color--status--custom--default --pf-t--global--color--status--custom--100 --pf-t--color--teal--60 #147878
	.pf-v6-c-popover.pf-m-info	--pf-v6-c-popover__title-icon--Color	(In light theme) #5e40be
--pf-v6-c-popover__title-icon--Color --pf-v6-c-popover--m-info__title-icon--Color --pf-t--global--icon--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be