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 | List | $kendo-font-family | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
Description
The font family of the Tooltip. | |||
| $kendo-tooltip-font-size | Number | $kendo-font-size-sm | 0.875rem |
Description
The font size of the Tooltip. | |||
| $kendo-tooltip-line-height | Number | $kendo-line-height-md | 1.5 |
Description
The line height of the Tooltip. | |||
| $kendo-tooltip-title-font-size | Number | ($kendo-tooltip-font-size * 1.25) | 1.09375rem |
Description
The font size of the Tooltip title. | |||
| $kendo-tooltip-title-line-height | Number | 1 | 1 |
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 | Color | if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) | #000000 |
Description
The default background of the Tooltip. | |||
| $kendo-tooltip-text | Color | if($kendo-enable-color-system, k-color( app-surface ), k-contrast-color( $kendo-tooltip-bg )) | white |
Description
The default text color of the Tooltip. | |||
| $kendo-tooltip-border | Color | $kendo-tooltip-bg | #000000 |
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": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529) |
Description
The theme colors map for the Tooltip. | |||
| $kendo-tooltip-theme | Map | tooltip-theme( $kendo-tooltip-theme-colors ) | ("inverse": (color: white, background-color: #212529, border: #212529), "light": (color: black, background-color: #f8f9fa, border: #f8f9fa), "dark": (color: white, background-color: #212529, border: #212529), "error": (color: white, background-color: #dc3545, border: #dc3545), "warning": (color: black, background-color: #ffc107, border: #ffc107), "success": (color: white, background-color: #198754, border: #198754), "info": (color: white, background-color: #0dcaf0, border: #0dcaf0), "tertiary": (color: white, background-color: #6f42c1, border: #6f42c1), "secondary": (color: white, background-color: #6c757d, border: #6c757d), "primary": (color: white, background-color: #0d6efd, border: #0d6efd)) |
Description
The generated theme colors map for the Tooltip. | |||
