New to Kendo UI for Vue? Start a free 30-day trial
Customizing Tooltip
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-tooltip-border-radius | Number | k-map-get( $kendo-border-radii, md ) | 0.25rem |
Description
The radius of the border around the tooltip | |||
| $kendo-tooltip-padding-x | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the tooltip | |||
| $kendo-tooltip-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the tooltip | |||
| $kendo-tooltip-border-width | Number | 0px | 0px |
Description
The width of the border around the tooltip | |||
| $kendo-tooltip-font-family | Null | null | null |
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-sm | 1.25 |
Description
The line height of the tooltip | |||
| $kendo-tooltip-title-margin | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The margin of the tooltip title | |||
| $kendo-tooltip-title-font-size | Number | $kendo-font-size-md | 1rem |
Description
The font size of the tooltip title | |||
| $kendo-tooltip-title-line-height | Number | $kendo-line-height-md | 1.5 |
Description
The line height of the tooltip title | |||
| $kendo-tooltip-title-font-weight | String | normal | normal |
Description
The went weight of the tooltip title | |||
| $kendo-tooltip-callout-size | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The size of the tooltip callout | |||
