Skip to content
This repository was archived by the owner on Nov 8, 2024. It is now read-only.
/ Tooltip-Toolbox Public archive

A highly flexible jQuery Tooltip plugin that is easily adaptable to create complex non-modal overlays, such as dropdown menus etc.

Notifications You must be signed in to change notification settings

lukasbob/Tooltip-Toolbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 

Repository files navigation

#Tooltip-Toolkit

This is a tooltip plugin for jQuery that aspires to come out as a fully fledged, non-modal overlay solution.

A demonstration is available at http://tooltip-toolbox.lukasbob.com, which shows capabilites spanning from a lowly tooltip to full, nested dropdown menus.

We're part-way there, providing support for a range of positioning options, and with support for nested tooltips.

Usage is straight-forward:

HTML:
<p title="My title">This element has a title</p>

JavaScript:
$('[title]').tt();

This gives you a straight-forward tooltip, using the element's title attribute.

##Features:

  • Never disappears offscreen - knows where the edges are and repositions intelligently
  • Support for nested tooltips, allowing for many applications and great versatility
  • Full positioning control
  • Full control over timing

##Usage

	$(selector).tt(options);

##Options

Options defaults:

	{
		showEvent: 'mouseover', //Event that triggers display of tooltip
		hideEvent: 'mouseout', //Event that triggers hiding the tooltip
		align: 'flushLeft', //Horizontal positioning
		vAlign: 'above', //Vertical positioning
		visibleOnScroll: true, //Keep tooltip on-screen
		windowMargin: 5, //Tooltip margin to viewport edge
		distanceX: 2, //Horizontal distance between tooltip and trigger element
		distanceY: 2, //Vertical distance between tooltip and trigger element
		nudgeX: 0, //Nudge position along x axis
		nudgeY: 0, //Nudge position along y axis
		ttClass: 'tt_tip', //Class to apply to the tooltip for custom styling
		activeClass: 'tt_active', //Class applied to trigger element when tooltip is displayed.
		ttIdPrefix: 'tt_', //Correlates ids of trigger element and tooltip element - id="example" searches for id="tt_example"
		timeOut: 1000, //Time between hideEvent and the tooltip is hidden
		delay: 250, //Time between showEvent and tooltip is displayed.
		fadeIn: 100, //Time it takes for the tooltip to fade in.
		fadeOut: 250, //Time it takes for the tooltip to fade out.			
	};

###Positioning options:

  • align - Horizontal positioning:
    • left - to the left of the target element
    • right - to the right of the target element
    • flushLeft - The left edge of the tooltip is flush with the left edge of the target element
    • flushRight - The right edge of the tooltip is flush with the right edge of the target element
    • center - horizontally centered with the target element
    • absCenter - centered on screen
  • vAlign - Vertical positioning:
    • above - above the target element
    • below - below the target element
    • flushTop - the top edge of the tooltip is vertically aligned with the top edge of the target element
    • flushBottom - the bottom edge of the tooltip is aligned with the bottom edge of the target element
    • center - vertically aligned with the target element
    • absCenter - centered on screen

About

A highly flexible jQuery Tooltip plugin that is easily adaptable to create complex non-modal overlays, such as dropdown menus etc.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published