• _tooltips.scss
  • tooltips.js
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/tooltips

Module Overview

  • Name: tooltip
  • Components: wrapper, content
  • Modifiers: top, bottom, left, right



Tooltip - Top

<a href="#" class="button-icon tooltip-top" data-tooltip="Facebook">
    <i class="fa fa-facebook"></i>

Tooltip - Bottom

<a href="#" class="button-icon tooltip-bottom" data-tooltip="Twitter">
    <i class="fa fa-twitter"></i>

Tooltip - Left

<a href="#" class="button-icon tooltip-left" data-tooltip="Skype">
    <i class="fa fa-skype"></i>

Tooltip - Right

<a href="#" class="button-icon tooltip-right" data-tooltip="Dribbble">
    <i class="fa fa-dribbble"></i>

Inline Tooltip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at mi ac sapien lobortis sagittis.

<a href="#" class="tooltip inline-tooltip" data-tooltip="I am tooltip!">consectetur adipiscing</a>


The thumbnails can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name Default Value Description
max-width 500px The maximum width for tooltips before text starts to wrap.
padding 0.5em 0.75em The tooltip padding.
distance -1em The distance the tooltip should be from the parent object.
background rgba(black, 0.75) The tooltip background.
border-radius 0 The radius of the toolitp.
arrow-size 0.5em The size of the tooltip arrow.
arrow-color rgba(black, 0.75) The tooltip arrow color.
font-size font-size('size-2', $rem: true) The tooltip font size.
color white The tooltip text color.
text-transform none The tooltip text-transform.
font-weight normal The tooltip font weight.
transition base('transition') The tooltip fade-in animation transition duration.
z-index 9999 The tooltip z-index.

To change one of the above values, pass your new value(s) to the tooltips() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include tooltips((
    'background'       : linear-gradient(to bottom, #9b00d8 0%, #258dc8 100%),
    'arrow-color'      : #9B58B5,
    'border-radius'    : white,
    'text-transform'   : uppercase,
    'padding'          : 0.65em 1.2em