New to Kendo UI for Vue? Start a free 30-day trial

Customizing Popover

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-popover-border-widthNumber1px1px
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-radiusString$kendo-card-border-radiusvar(--kendo-border-radius-md, 0.25rem)
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-heightNumber$kendo-card-line-height1.4285714286
Description
The line height of the Popover.
$kendo-popover-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Popover.
$kendo-popover-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Popover.
$kendo-popover-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Popover.
$kendo-popover-shadowString$kendo-card-shadowvar(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The box shadow of the Popover.
$kendo-popover-header-padding-xString$kendo-card-header-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Popover header.
$kendo-popover-header-padding-yString$kendo-card-header-padding-yvar(--kendo-spacing-3, 0.75rem)
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-textNull$kendo-card-header-textnull
Description
The text color of the Popover header.
$kendo-popover-header-bgNull$kendo-card-header-bgnull
Description
The background color of the Popover header.
$kendo-popover-header-borderString$kendo-card-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Popover header.
$kendo-popover-body-padding-xString$kendo-card-body-padding-xvar(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Popover body.
$kendo-popover-body-padding-yString$kendo-card-body-padding-yvar(--kendo-spacing-4, 1rem)
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-width20px
Description
The width of the Popover callout.
$kendo-popover-callout-heightNumber$kendo-card-callout-height20px
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(0, 0, 0, 0.12))
Description
The border color of the Popover callout.

In this article

Not finding the help you need?