Tooltips

Available Sass Variables and default values

$tooltip-fade-out-duration: 300ms
$tooltip-fade-in-duration: 300ms
$tooltip-padding: 10px 15px
$tooltip-color: $wt
$tooltip-background-color: $brand-secondary
$tooltip-width: 200px
$tooltip-distance-from-trigger: 5px
$tooltip-arrow-height: 6px

$tooltip-help-icon-color: $brand-secondary
$tooltip-help-icon-background-color: lighten($brand-secondary, 30%)
$tooltip-help-icon-border: 1px solid $brand-secondary
$tooltip-help-icon-font-size: 12px
$tooltip-help-icon-size: 2em
$tooltip-border-radius: 50%

Examples

Basic Tooltip

span data-tooltip-text="This is a tooltip." Help
Help

Help Icon

A class of .help-icon will create a small trigger for a tooltip

span.help-icon data-tooltip-text="This is a tooltip." ?
?

Positioned Tooltips

To change the location of the tooltip relative to the trigger, add another attribute to the trigger: .data-tooltip-position. The value can be any cardinal direction or their intermediates, abbreviated to one or two letters. (n, ne, e, se, s, sw, w, nw)

With smaller triggers (like the .help-icon) n, s, e, and w work best.


?
?
?
?
?
?
?
?

Limitations

There is nothing preventing these from extending off the viewport. Be sure to position the tooltip so that on smaller/larger screens the tooltips are still visible.