Foundation - Tooltip SASS Reference

Description

You can change the styles of the components by using SASS Reference.

Variables

The following table lists the SASS variables in project's settings file that makes this component's default styles to get customized.

Sr.No. Name & Description Type Default Value
1

$tooltip-background-color

It represents the default background color of the tooltip.

 Color $black
2

$tooltip-color

It represents the default font color of the tooltip.

 Color $white
3

$tooltip-padding

It represents the default padding of tooltip background.

 Number 0.75rem
4

$tooltip-font-size

It represents the tooltip text's default font size.

 Number $small-font-size
5

$tooltip-pip-width

It represents the default pip width.

 Number 0.75rem
6

$tooltip-pip-height

It represents the default pip height which is useful for calculating the distance of tooltip from its word.

 Number $tooltip-pip-width * 0.866
7

$tooltip-pip-offset

It represents the default pip tooltip's offset. This shows at what distance pip is indented from the tooltip's left edge.

 Number 1.25rem
8

$tooltip-radius

It represents the tooltip's default radius.

 Number $global-radius
foundation_media.htm
Advertisements