The background color to use for tooltips.
$rmd-tooltip-background-color: #616161 !default;The text color to use for tooltips. By default, this will inherit the primary text colors for a dark or light background color of the tooltip.
$rmd-tooltip-color: if(
rmd-theme-tone($rmd-tooltip-background-color) == light,
rmd-theme-var(text-primary-on-light),
rmd-theme-var(text-primary-on-dark)
) !default;The max width to apply to tooltips.
$rmd-tooltip-max-width: 15rem !default;The enter transition time for the tooltip to enter or to exit.
$rmd-tooltip-enter-duration: $rmd-transition-standard-time !default;The exit transition time for the tooltip to enter or to exit.
$rmd-tooltip-exit-duration: $rmd-transition-standard-time !default;The z-index to use for tooltips when they are visible.
$rmd-tooltip-z-index: $rmd-utils-temporary-element-z-index + 20 !default;The font size to use for tooltips
$rmd-tooltip-font-size: 1rem !default;The default line-height to use for tooltips.
$rmd-tooltip-line-height: 1.5rem !default;The min height to use for tooltips. This allows the tooltips to grow in height automatically based on line wrapping. You will need to add additional padding in these cases though.
$rmd-tooltip-min-height: 2rem !default;The left and right padding to apply to tooltips.
$rmd-tooltip-horizontal-padding: 1rem !default;The top and bottom padding to apply to tooltips when line wrapping is enabled.
$rmd-tooltip-line-wrap-vertical-padding: 0.5625rem !default;The amount of spacing to place between the tooltip and the tooltip's container element.
$rmd-tooltip-spacing: 1.5rem !default;The font size to use for dense tooltips.
$rmd-tooltip-dense-font-size: 0.625rem !default;The line height to use for dense tooltips.
$rmd-tooltip-dense-line-height: 0.825rem !default;The min-height to use for dense tooltips. This allows the tooltips to grow in height automatically based on line wrapping. You will need to add additional padding in these cases though.
$rmd-tooltip-dense-min-height: 1.375rem !default;The left and right padding to use for dense tooltips
$rmd-tooltip-dense-horizontal-padding: 0.5rem !default;The top and bottom padding to apply to dense tooltips when line wrapping is enabled.
$rmd-tooltip-dense-line-wrap-vertical-padding: 0.375rem !default;The amount of spacing to place between the dense tooltip and the tooltip's container element.
$rmd-tooltip-dense-spacing: 0.875rem !default;The border radius to apply to tooltips
$rmd-tooltip-border-radius: 0.25rem !default;The distance that the tooltip should animate from the tooltip's control element.
$rmd-tooltip-transition-distance: 0.5rem !default;This is really just for internal use and a nice way to loop over the four positions when creating styles.
$rmd-tooltip-position-values: above below left right;A Map of all the "themeable" parts of the overlay package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
$rmd-tooltip-theme-values: (
background-color: $rmd-tooltip-background-color,
color: $rmd-tooltip-color,
transition-distance: $rmd-tooltip-transition-distance,
z-index: $rmd-tooltip-z-index,
spacing: $rmd-tooltip-spacing,
min-height: $rmd-tooltip-min-height,
max-width: $rmd-tooltip-max-width,
font-size: $rmd-tooltip-font-size,
line-height: $rmd-tooltip-line-height,
horizontal-padding: $rmd-tooltip-horizontal-padding,
vertical-padding: $rmd-tooltip-line-wrap-vertical-padding,
dense-spacing: $rmd-tooltip-dense-spacing,
dense-min-height: $rmd-tooltip-dense-min-height,
dense-font-size: $rmd-tooltip-dense-font-size,
dense-line-height: $rmd-tooltip-dense-line-height,
dense-horizontal-padding: $rmd-tooltip-dense-horizontal-padding,
dense-vertical-padding: $rmd-tooltip-dense-line-wrap-vertical-padding,
);Creates the styles for one of the tooltip's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Updates one of the tooltip's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The tooltip theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates the base styles for a tooltip.
Creates the base styles to allow line-wrapping tooltips.
Creates the dense tooltip style overrides.
Creates all the styles for a tooltip element. This should be used within a css class.
Creates all the styles and theme for the tooltip package.
This function is used to quickly get one of the tooltip's theme values. This is really just for the rmd-tooltip-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the tooltip's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the tooltip's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-tooltip-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Stringone of the tooltip's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |
A small util that will rename the above and below positions of the tooltip to top and bottom to be used for applying styles.
Stringthe position as a valid style name.
| Name | Description | Type | Default Value |
|---|---|---|---|
$position | the position to change. | String | — |
A small util for inversing the position. This is just used for generating the default styles.
Stringthe position inversed.
| Name | Description | Type | Default Value |
|---|---|---|---|
$position | One of the | String | — |