Skip to main content
react-md
react-md - Tooltip - SassDoc

Variables

rmd-tooltip-background-color

Color

The background color to use for tooltips.

$rmd-tooltip-background-color: #616161 !default;

rmd-tooltip-color

Color

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;

rmd-tooltip-max-width

Number

The max width to apply to tooltips.

$rmd-tooltip-max-width: 15rem !default;

rmd-tooltip-enter-duration

Number

The enter transition time for the tooltip to enter or to exit.

$rmd-tooltip-enter-duration: $rmd-transition-standard-time !default;

rmd-tooltip-exit-duration

Number

The exit transition time for the tooltip to enter or to exit.

$rmd-tooltip-exit-duration: $rmd-transition-standard-time !default;

rmd-tooltip-z-index

Number

The z-index to use for tooltips when they are visible.

$rmd-tooltip-z-index: $rmd-utils-temporary-element-z-index + 20 !default;

rmd-tooltip-font-size

Number

The font size to use for tooltips

$rmd-tooltip-font-size: 1rem !default;
See also

rmd-tooltip-line-height

Number

The default line-height to use for tooltips.

$rmd-tooltip-line-height: 1.5rem !default;

rmd-tooltip-min-height

Number

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;
See also

rmd-tooltip-horizontal-padding

Number

The left and right padding to apply to tooltips.

$rmd-tooltip-horizontal-padding: 1rem !default;
See also

rmd-tooltip-line-wrap-vertical-padding

Number

The top and bottom padding to apply to tooltips when line wrapping is enabled.

$rmd-tooltip-line-wrap-vertical-padding: 0.5625rem !default;
See also

rmd-tooltip-spacing

Number

The amount of spacing to place between the tooltip and the tooltip's container element.

$rmd-tooltip-spacing: 1.5rem !default;
See also

rmd-tooltip-dense-font-size

Number

The font size to use for dense tooltips.

$rmd-tooltip-dense-font-size: 0.625rem !default;

rmd-tooltip-dense-line-height

Number

The line height to use for dense tooltips.

$rmd-tooltip-dense-line-height: 0.825rem !default;

rmd-tooltip-dense-min-height

Number

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;
See also

rmd-tooltip-dense-horizontal-padding

Number

The left and right padding to use for dense tooltips

$rmd-tooltip-dense-horizontal-padding: 0.5rem !default;

rmd-tooltip-dense-line-wrap-vertical-padding

Number

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;
See also

rmd-tooltip-dense-spacing

Number

The amount of spacing to place between the dense tooltip and the tooltip's container element.

$rmd-tooltip-dense-spacing: 0.875rem !default;

rmd-tooltip-border-radius

Number

The border radius to apply to tooltips

$rmd-tooltip-border-radius: 0.25rem !default;

rmd-tooltip-transition-distance

Number

The distance that the tooltip should animate from the tooltip's control element.

$rmd-tooltip-transition-distance: 0.5rem !default;

rmd-tooltip-position-values

List

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;

rmd-tooltip-theme-values

Map

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,
);

Mixins

rmd-tooltip-theme

mixin

Creates the styles for one of the tooltip's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-tooltip-theme-values value to.

String
$theme-style

One of the keys of rmd-tooltip-theme-values to extract a value from.

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 rmd-tooltip-theme-values map when null.

Color|String|Numbernull

rmd-tooltip-theme-update-var

mixin

Updates one of the tooltip's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The tooltip theme style type to update. This should be one of the $rmd-tooltip-theme-values keys.

String
$value

The new value to use.

Color|String|Number

rmd-tooltip-base

mixin

Creates the base styles for a tooltip.

rmd-tooltip-line-wrap

mixin

Creates the base styles to allow line-wrapping tooltips.

rmd-tooltip-dense-theme

mixin

Creates the dense tooltip style overrides.

rmd-tooltip

mixin

Creates all the styles for a tooltip element. This should be used within a css class.

react-md-tooltip

mixin

Creates all the styles and theme for the tooltip package.

Functions

rmd-tooltip-theme

function

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.

Returns — Color|String|Number

one of the tooltip's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-tooltip-theme-values map keys to get a value for.

String

rmd-tooltip-theme-var

function

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.

Returns — String

one of the tooltip's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-tooltip-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull

rmd-tooltip-position-to-property

function

A small util that will rename the above and below positions of the tooltip to top and bottom to be used for applying styles.

Returns — String

the position as a valid style name.

Parameters
NameDescriptionTypeDefault Value
$position

the position to change.

String

rmd-tooltip-inverse-position

function

A small util for inversing the position. This is just used for generating the default styles.

Returns — String

the position inversed.

Parameters
NameDescriptionTypeDefault Value
$position

One of the $rmd-tooltip-position-values strings

String