Tooltips

Tooltips are text labels that appear when a hover or focus event are triggered on a tooltip enabled element. To enable tooltips on an element, simply add the .tooltip class along with the data-tooltip data attribute with the label text you’d like displayed.

You can also add position classes such as .tooltip-top, .tooltip-left, .tooltip-right or .tooltip-bottom to dictate from where the tooltip is displayed relative to the triggering element.

<!-- Tooltip with default positioning -->
<a class="tooltip" data-tooltip="Tooltip text...">...</a>

<!-- Tooltips with custom class positioning -->
<a class="tooltip tooltip-top" data-tooltip="Tooltip text...">...</a>
<a class="tooltip tooltip-left" data-tooltip="Tooltip text...">...</a>
<a class="tooltip tooltip-right" data-tooltip="Tooltip text...">...</a>
<a class="tooltip tooltip-bottom" data-tooltip="Tooltip text...">...</a>

Variable Map

Tooltip variables are encompassed within the $tooltips map and are used throughout all tooltip mixins to set default values.

$tooltips: (
  'output' : true,
  'output-position' : true,
  'class' : 'tooltip',

  'z-index' : 100,
  'max-width' : 30em,
  'padding' : 0.5em 1em,

  'transition-duration' : 0.2s,

  'background' : rgba($color, 0.9),
  'border-radius' : $border-radius,

  'font-size' : px-to-rem(12px),
  'line-height' : 1.5em,
  'color' : $white,

  'position-start' : 0,
  'position-end'   : 0.5em,

) !default;

make-tooltip

Creates the base styles for tooltips block.

@include make-tooltip( $options: () );
Variable Type Default
$options Map $tooltips

Example Usage

The default use of this mixin simply outputs the default styles for tooltips using the class set in $tooltips('class') which is .tooltip.

.#{map-get($tooltips, 'class')} {
  @include make-tooltip();
}

add-tooltip-position

Adds the position styles for a tooltip.

@include add-tooltip-position( $anchor : 'top', $class : null, $options: () );
Variable Type Options Default
$anchor String 'top'
$class String null, default, 'string...' null
$options Map $tooltips

Example Usage

We can set the default tooltip position by wrapping the mixin with the base tooltip class from our $tooltips map. Alternatively, we can set custom modifier classes by passing default to the class parameter and it will build a class using the base class and the anchor modifier (e.g. tooltip-left, tooltip-bottom-left, etc).

// This sets the default position of tooltips
.#{map-get($tooltips, 'class')} {
  @include add-tooltip-position();
}

// This sets the modifier classes for positioning tooltips
@include add-tooltip-position('top', default);
@include add-tooltip-position('left', default);
@include add-tooltip-position('right', default);
@include add-tooltip-position('bottom', default);

// etc...