Tooltips

Variables

md-tooltip-mobile-font-size
$md-tooltip-mobile-font-size: 14px !default;
Sass (Scss)

Description

The font size for tooltips on mobile devices.

Type

Number

Used by

md-tooltip-mobile-tile-height
$md-tooltip-mobile-tile-height: 32px !default;
Sass (Scss)

Description

The height of the tooltip on mobile devices.

Type

Number
md-tooltip-mobile-lr-padding
$md-tooltip-mobile-lr-padding: 16px !default;
Sass (Scss)

Description

The left and right padding for a tooltip on mobile devices.

Type

Number

Used by

md-tooltip-mobile-tb-padding
$md-tooltip-mobile-tb-padding: ($md-tooltip-mobile-tile-height - $md-tooltip-mobile-font-size) / 2 !default;
Sass (Scss)

Description

The top and bottom padding for tooltips on mobile devices.

Type

Number

Used by

md-tooltip-mobile-top-margin
$md-tooltip-mobile-top-margin: 24px !default;
Sass (Scss)

Description

The margin between a tooltip and its corresponding element on mobile devices.

Type

Number

Used by

md-tooltip-desktop-font-size
$md-tooltip-desktop-font-size: 10px !default;
Sass (Scss)

Description

The font size for tooltip son desktop screens.

Type

Number

Used by

md-tooltip-desktop-tile-height
$md-tooltip-desktop-tile-height: 22px !default;
Sass (Scss)

Description

The height for tooltips on desktop screens.

Type

Number
md-tooltip-desktop-lr-padding
$md-tooltip-desktop-lr-padding: 8px !default;
Sass (Scss)

Description

The left and right padding for tooltips on desktop screens.

Type

Number

Used by

md-tooltip-desktop-tb-padding
$md-tooltip-desktop-tb-padding: ($md-tooltip-desktop-tile-height - $md-tooltip-desktop-font-size) / 2 !default;
Sass (Scss)

Description

The top and bottom padding for tooltips on desktop screens.

Type

Number

Used by

md-tooltip-desktop-top-margin
$md-tooltip-desktop-top-margin: 14px !default;
Sass (Scss)

Description

The margin between a tooltip and its corresponding element on desktop screens.

Type

Number

Used by

md-tooltip-color
$md-tooltip-color: $md-grey-700 !default;
Sass (Scss)

Description

The background color for tooltips.

Type

Color

Used by

md-tooltip-opacity
$md-tooltip-opacity: .9 !default;
Sass (Scss)

Description

The overall opacity to apply to tooltips.

Type

Number

Used by

Mixins

react-md-tooltips
@mixin react-md-tooltips($media-included: $md-media-included) {}
Sass (Scss)
Click to expand

Description

Creates the styles for tooltips.

Parameters

NameDescriptionTypeDefault value
$media-included

Boolean if the media queries should be included.

Boolean
$md-media-included

Examples

Example Usage SCSS

@include react-md-tooltips;
Sass (Scss)

Requires

Used by

react-md-tooltips-mobile
@mixin react-md-tooltips-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for tooltips on mobile devices. This should normally be used in a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-tooltips-mobile;
}
Sass (Scss)

Requires

Used by

react-md-tooltips-desktop
@mixin react-md-tooltips-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for tooltips on desktop screens. This should normally be used in a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-tooltips-desktop;
}
Sass (Scss)

Requires

Used by

react-md-tooltips-media
@mixin react-md-tooltips-media {}
Sass (Scss)
Click to expand

Description

Includes the media queries for tooltips on mobile devices and desktop screens.

Parameters

None

Examples

Example Usage SCSS

@include react-md-tooltips-media;
Sass (Scss)

Requires

Used by