Customizing Popover

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-popover-border-widthNumber$kendo-card-border-width1px
Description
The width of the border around the Popover.
$kendo-popover-border-styleStringsolidsolid
Description
The style of the border around the Popover.
$kendo-popover-border-radiusNumber$kendo-card-border-radius0.375rem
Description
The radius of the border around the Popover.
$kendo-popover-font-familyString$kendo-card-font-familyvar(--kendo-font-family, inherit)
Description
The font family of the Popover.
$kendo-popover-font-sizeString$kendo-card-font-sizevar(--kendo-font-size, inherit)
Description
The font size of the Popover.
$kendo-popover-line-heightString$kendo-card-line-heightvar(--kendo-line-height, normal)
Description
The line height of the Popover.
$kendo-popover-textString$kendo-card-textvar(--kendo-color-on-app-surface, #212529)
Description
The text color of the Popover.
$kendo-popover-bgString$kendo-card-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Popover.
$kendo-popover-borderString$kendo-card-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Popover.
$kendo-popover-shadowNull$kendo-card-shadownull
Description
The box shadow of the Popover.
$kendo-popover-header-padding-xNumber$kendo-card-header-padding-x1rem
Description
The horizontal padding of the Popover header.
$kendo-popover-header-padding-yNumber$kendo-card-header-padding-y1rem
Description
The vertical padding of the Popover header.
$kendo-popover-header-border-widthNumber$kendo-card-header-border-width1px
Description
The border width of the Popover header.
$kendo-popover-header-border-styleString$kendo-popover-border-stylesolid
Description
The border style of the Popover header.
$kendo-popover-header-textNullnullnull
Description
The text color of the Popover header.
$kendo-popover-header-bgNullnullnull
Description
The background color of the Popover header.
$kendo-popover-header-borderNullnullnull
Description
The border color of the Popover header.
$kendo-popover-body-padding-xNumber$kendo-card-body-padding-x1rem
Description
The horizontal padding of the Popover body.
$kendo-popover-body-padding-yNumber$kendo-card-body-padding-y1rem
Description
The vertical padding of the Popover body.
$kendo-popover-actions-border-widthNumber$kendo-popover-border-width1px
Description
The border width of the Popover actions.
$kendo-popover-callout-widthNumber$kendo-card-callout-width1.3em
Description
The width of the Popover callout.
$kendo-popover-callout-heightNumber$kendo-card-callout-height1.3em
Description
The height of the Popover callout.
$kendo-popover-callout-border-widthNumber$kendo-popover-border-width1px
Description
The border width of the Popover callout.
$kendo-popover-callout-border-styleString$kendo-popover-border-stylesolid
Description
The border style of the Popover callout.
$kendo-popover-callout-bgString$kendo-popover-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Popover callout.
$kendo-popover-callout-borderString$kendo-popover-bordervar(--kendo-color-border, rgba(33, 37, 41, 0.13))
Description
The border color of the Popover callout.

In this article

Not finding the help you need?