RESPONSIVE CSS FRAMEWORK

Tooltips

Tooltips are the best way to deliver precise answers or detailed information for web users’ possible questions or misunderstandings on a page. The framework includes fifteen tooltip styles, the first seven of these have two color styles, the last eight have six color styles. Each tooltip style supports placement classes, enumerated below. It will be easy to find a suitable tooltip for your website from this huge set.
Placement classes
<span class="tooltip [top-left, top-center, top-right, bottom-left, bottom-center, bottom-right, left-top, left-center, left-bottom, right-top, right-center, right-bottom] style-1 dark" title="Tooltip text" data-width="150"></span>
Note: If you don’t set any placement class for the tooltip, it will follow the mouse cursor’s position.
Skin style classes
<span class="tooltip top-left [style-1, style-2, style-3, style-4, style-5, style-6, style-7, style-8, style-9, style-10, style-11, style-12, style-13, style-14, style-15] dark/gray" title="Tooltip text" data-width="150"></span>

Color classes for style-1 to style-7
<span class="tooltip top-left style-1 [dark, light]" title="Tooltip text" data-width="150"></span>

Color classes for style-8 to style-15
<span class="tooltip top-left style-8 [gray, yellow, blue, purple, green, red]" title="Tooltip text" data-width="150"></span>
The width of the tooltip is set by the data-width attribute. If this attribute is missing, the width of the tooltip will be autosized. The content of the tooltip is set by the title attribute.

Tooltip style-1

Follow the mouse
Top-left
Top-center
Top-right
Bottom-left
Bottom-center
Bottom-right
Left-top
Left-center
Left-bottom
Right-top
Right-center
Right-bottom

Include for tooltip style-1

// Common CSS file for the tooltips
<link rel="stylesheet" href="css/tooltips/JFTooltip.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/tooltips/JFTooltipStyle-1.css" />

// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->

// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->

// JS file for the tooltips
<script type="text/javascript" src="js/JFTooltips.js"></script>

Usage for tooltip style-1

<span data-width="150" class="tooltip top-left style-1 dark" title="Tooltip text tooltip text tooltip text">Top-left</span>
<span data-width="150" class="tooltip top-center style-1 dark" title="Tooltip text tooltip text tooltip text">Top-center</span>
<span data-width="150" class="tooltip top-right style-1 dark" title="Tooltip text tooltip text tooltip text">Top-right</span>
<span data-width="150" class="tooltip bottom-left style-1 light" title="Tooltip text tooltip text tooltip text">Bottom-left</span>
<span data-width="150" class="tooltip bottom-center style-1 light" title="Tooltip text tooltip text tooltip text">Bottom-center</span>
<span data-width="150" class="tooltip bottom-right style-1 light" title="Tooltip text tooltip text tooltip text">Bottom-right</span>
<span data-width="150" class="tooltip left-top style-1 dark" title="Tooltip text tooltip text tooltip text">Left-top</span>
<span data-width="150" class="tooltip left-center style-1 dark" title="Tooltip text tooltip text tooltip text">Left-center</span>
<span data-width="150" class="tooltip left-bottom style-1 dark" title="Tooltip text tooltip text tooltip text">Left-bottom</span>
<span data-width="150" class="tooltip right-top style-1 light" title="Tooltip text tooltip text tooltip text">Right-top</span>
<span data-width="150" class="tooltip right-center style-1 light" title="Tooltip text tooltip text tooltip text">Right-center</span>
<span data-width="150" class="tooltip right-bottom style-1 light" title="Tooltip text tooltip text tooltip text">Right-bottom</span>
Top