// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source //// /// @group tooltip //// /// Default cursor of the defined term. /// @type Keyword $has-tip-cursor: help !default; /// Default font weight of the defined term. /// @type Keyword | Number $has-tip-font-weight: $global-weight-bold !default; /// Default border bottom of the defined term. /// @type List $has-tip-border-bottom: dotted 1px $dark-gray !default; /// Default color of the tooltip background. /// @type Color $tooltip-background-color: $black !default; /// Default color of the tooltip font. /// @type Color $tooltip-color: $white !default; /// Default padding of the tooltip background. /// @type Number $tooltip-padding: 0.75rem !default; /// Default max width for tooltips. /// @type Number $tooltip-max-width: 10rem !default; /// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy. /// @type Number $tooltip-font-size: $small-font-size !default; /// Default pip width for tooltips. /// @type Number $tooltip-pip-width: 0.75rem !default; /// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word. /// @type Number $tooltip-pip-height: $tooltip-pip-width * 0.866 !default; /// Default radius for tooltips. /// @type Number $tooltip-radius: $global-radius !default; @mixin has-tip { position: relative; display: inline-block; border-bottom: $has-tip-border-bottom; font-weight: $has-tip-font-weight; cursor: $has-tip-cursor; } @mixin tooltip { position: absolute; top: calc(100% + #{$tooltip-pip-height}); z-index: 1200; max-width: $tooltip-max-width; padding: $tooltip-padding; border-radius: $tooltip-radius; background-color: $tooltip-background-color; font-size: $tooltip-font-size; color: $tooltip-color; &::before { position: absolute; } &.bottom { &::before { @include css-triangle($tooltip-pip-width, $tooltip-background-color, up); bottom: 100%; } &.align-center::before { left: 50%; transform: translateX(-50%); } } &.top { &::before { @include css-triangle($tooltip-pip-width, $tooltip-background-color, down); top: 100%; bottom: auto; } &.align-center::before { left: 50%; transform: translateX(-50%); } } &.left { &::before { @include css-triangle($tooltip-pip-width, $tooltip-background-color, right); left: 100%; } &.align-center::before { bottom: auto; top: 50%; transform: translateY(-50%); } } &.right { &::before { @include css-triangle($tooltip-pip-width, $tooltip-background-color, left); right: 100%; left: auto; } &.align-center::before { bottom: auto; top: 50%; transform: translateY(-50%); } } &.align-top::before { bottom: auto; top: 10%; } &.align-bottom::before { bottom: 10%; top: auto; } &.align-left::before { left: 10%; right: auto; } &.align-right::before { left: auto; right: 10%; } } @mixin foundation-tooltip { .has-tip { @include has-tip; } .tooltip { @include tooltip; } }