New to Kendo UI for AngularStart a free 30-day trial

Customizing Tooltip

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-tooltip-padding-yString$kendo-padding-md-yvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the Tooltip.
$kendo-tooltip-padding-xString$kendo-padding-md-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Tooltip.
$kendo-tooltip-border-widthNumber0px0px
Description
The width of the border around the Tooltip.
$kendo-tooltip-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Tooltip.
$kendo-tooltip-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Tooltip.
$kendo-tooltip-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the Tooltip.
$kendo-tooltip-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The line height of the Tooltip.
$kendo-tooltip-title-font-sizeCalculationcalc( ( var( --kendo-font-size, .875rem ) * 1.25 ) )calc(var(--kendo-font-size, 0.875rem) * 1.25)
Description
The font size of the Tooltip title.
$kendo-tooltip-title-line-heightStringvar( --kendo-line-height-xs, normal )var(--kendo-line-height-xs, normal)
Description
The line height of the Tooltip title.
$kendo-tooltip-callout-sizeNumber6px6px
Description
The size of the Tooltip callout.
$kendo-tooltip-bgStringif($kendo-enable-color-system, k-color( on-app-surface ), rgba( k-contrast-legacy( $kendo-body-bg ), .75 ))var(--kendo-color-on-app-surface, #3d3d3d)
Description
The default background of the Tooltip.
$kendo-tooltip-textStringif($kendo-enable-color-system, k-color( app-surface ), k-contrast-legacy( $kendo-tooltip-bg ))var(--kendo-color-app-surface, #ffffff)
Description
The default text color of the Tooltip.
$kendo-tooltip-borderString$kendo-tooltip-bgvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The default border color of the Tooltip.
$kendo-tooltip-shadowStringk-elevation(2)var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The box-shadow of the Tooltip.
$kendo-tooltip-theme-colorsMap$kendo-theme-colors
  • primary: var(--kendo-color-primary, #ff6358)
  • secondary: var(--kendo-color-secondary, #666666)
  • tertiary: var(--kendo-color-tertiary, #03a9f4)
  • info: var(--kendo-color-info, #0058e9)
  • success: var(--kendo-color-success, #37b400)
  • warning: var(--kendo-color-warning, #ffc000)
  • error: var(--kendo-color-error, #f31700)
  • dark: var(--kendo-color-dark, #3d3d3d)
  • light: var(--kendo-color-light, #ebebeb)
  • inverse: var(--kendo-color-dark, #3d3d3d)
Description
The theme colors map for the Tooltip.
$kendo-tooltip-themeMaptooltip-theme( $kendo-tooltip-theme-colors )
  • inverse: "color":"var(--kendo-color-on-inverse, #ffffff)","background-color":"var(--kendo-color-dark, #3d3d3d)","border":"var(--kendo-color-dark, #3d3d3d)"
  • light: "color":"var(--kendo-color-on-light, #000000)","background-color":"var(--kendo-color-light, #ebebeb)","border":"var(--kendo-color-light, #ebebeb)"
  • dark: "color":"var(--kendo-color-on-dark, #ffffff)","background-color":"var(--kendo-color-dark, #3d3d3d)","border":"var(--kendo-color-dark, #3d3d3d)"
  • error: "color":"var(--kendo-color-on-error, #ffffff)","background-color":"var(--kendo-color-error, #f31700)","border":"var(--kendo-color-error, #f31700)"
  • warning: "color":"var(--kendo-color-on-warning, #3d3d3d)","background-color":"var(--kendo-color-warning, #ffc000)","border":"var(--kendo-color-warning, #ffc000)"
  • success: "color":"var(--kendo-color-on-success, #ffffff)","background-color":"var(--kendo-color-success, #37b400)","border":"var(--kendo-color-success, #37b400)"
  • info: "color":"var(--kendo-color-on-info, #ffffff)","background-color":"var(--kendo-color-info, #0058e9)","border":"var(--kendo-color-info, #0058e9)"
  • tertiary: "color":"var(--kendo-color-on-tertiary, #ffffff)","background-color":"var(--kendo-color-tertiary, #03a9f4)","border":"var(--kendo-color-tertiary, #03a9f4)"
  • secondary: "color":"var(--kendo-color-on-secondary, #ffffff)","background-color":"var(--kendo-color-secondary, #666666)","border":"var(--kendo-color-secondary, #666666)"
  • primary: "color":"var(--kendo-color-on-primary, #ffffff)","background-color":"var(--kendo-color-primary, #ff6358)","border":"var(--kendo-color-primary, #ff6358)"
Description
The generated theme colors map for the Tooltip.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support