Files

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

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

Module Overview

Examples

Positions

Tooltip - Top

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

Tooltip - Bottom

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

Tooltip - Left

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

Tooltip - Right

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

Inline Tooltip

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

Customizing

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
));