Customizing Tooltip

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-tooltip-padding-y	Number	$tooltip-padding-y	0.25rem
Description The vertical padding of the Tooltip.
$kendo-tooltip-padding-x	Number	$tooltip-padding-x	0.5rem
Description The horizontal padding of the Tooltip.
$kendo-tooltip-border-width	Number	0px	0px
Description The width of the border around the Tooltip.
$kendo-tooltip-border-radius	Number	$tooltip-border-radius	0.375rem
Description The border radius of the Tooltip.
$kendo-tooltip-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Tooltip.
$kendo-tooltip-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the Tooltip.
$kendo-tooltip-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the Tooltip.
$kendo-tooltip-title-font-size	Calculation	calc( var( --kendo-font-size-sm, #{$kendo-font-size-sm} ) * 1.25 )	calc(var(--kendo-font-size-sm, 0.875rem) * 1.25)
Description The font size of the Tooltip title.
$kendo-tooltip-title-line-height	String	var( --kendo-line-height-xs, normal )	var(--kendo-line-height-xs, normal)
Description The line height of the Tooltip title.
$kendo-tooltip-callout-size	Number	$tooltip-arrow-height	0.4rem
Description The size of the Tooltip callout.
$kendo-tooltip-bg	String	if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ))	var(--kendo-color-on-app-surface, #212529)
Description The default background of the Tooltip.
$kendo-tooltip-text	String	if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg ))	var(--kendo-color-app-surface, #ffffff)
Description The default text color of the Tooltip.
$kendo-tooltip-border	String	$kendo-tooltip-bg	var(--kendo-color-on-app-surface, #212529)
Description The default border color of the Tooltip.
$kendo-tooltip-shadow	String	k-elevation(2)	var(--kendo-elevation-2, 0px 2px 7px rgba(0, 0, 0, 0.075))
Description The box-shadow of the Tooltip.
$kendo-tooltip-theme-colors	Map	$kendo-theme-colors	primary: var(--kendo-color-primary, #0d6efd) secondary: var(--kendo-color-secondary, #6c757d) tertiary: var(--kendo-color-tertiary, #6f42c1) info: var(--kendo-color-info, #0dcaf0) success: var(--kendo-color-success, #198754) warning: var(--kendo-color-warning, #ffc107) error: var(--kendo-color-error, #dc3545) dark: var(--kendo-color-dark, #212529) light: var(--kendo-color-light, #f8f9fa) inverse: var(--kendo-color-dark, #212529)
Description The theme colors map for the Tooltip.
$kendo-tooltip-theme	Map	tooltip-theme( $kendo-tooltip-theme-colors )	inverse: "color":"var(--kendo-color-on-inverse, #ffffff)","background-color":"var(--kendo-color-dark, #212529)","border":"var(--kendo-color-dark, #212529)" light: "color":"var(--kendo-color-on-light, #000000)","background-color":"var(--kendo-color-light, #f8f9fa)","border":"var(--kendo-color-light, #f8f9fa)" dark: "color":"var(--kendo-color-on-dark, #ffffff)","background-color":"var(--kendo-color-dark, #212529)","border":"var(--kendo-color-dark, #212529)" error: "color":"var(--kendo-color-on-error, #ffffff)","background-color":"var(--kendo-color-error, #dc3545)","border":"var(--kendo-color-error, #dc3545)" warning: "color":"var(--kendo-color-on-warning, #000000)","background-color":"var(--kendo-color-warning, #ffc107)","border":"var(--kendo-color-warning, #ffc107)" success: "color":"var(--kendo-color-on-success, #ffffff)","background-color":"var(--kendo-color-success, #198754)","border":"var(--kendo-color-success, #198754)" info: "color":"var(--kendo-color-on-info, #000000)","background-color":"var(--kendo-color-info, #0dcaf0)","border":"var(--kendo-color-info, #0dcaf0)" tertiary: "color":"var(--kendo-color-on-tertiary, #ffffff)","background-color":"var(--kendo-color-tertiary, #6f42c1)","border":"var(--kendo-color-tertiary, #6f42c1)" secondary: "color":"var(--kendo-color-on-secondary, #ffffff)","background-color":"var(--kendo-color-secondary, #6c757d)","border":"var(--kendo-color-secondary, #6c757d)" primary: "color":"var(--kendo-color-on-primary, #ffffff)","background-color":"var(--kendo-color-primary, #0d6efd)","border":"var(--kendo-color-primary, #0d6efd)"
Description The generated theme colors map for the Tooltip.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components