Docs

For an usage example see HowTo or a complete Demo.

FloatingTips

Implements:

• Options
• Events

Syntax and options:

var myTips = new FloatingTips(elements, options);
$$(elements).floatingTips(options); // Equivalent example

• elements (string or collection): Elements that will trigger floating tips; can an be a string selector or an element collection.
• options (object): Options for the class.
  • position: Tip position, can be “top”, “right”, “bottom” or “left” (default "top").
  • fixed: If the tip should be placed in fixed position (default FALSE). This allows you to have tips on fixed elements, that do no scroll on page scrolling.
  • center: If the tip will be placed centered on the target element (default TRUE).
  • content: (string or function) If this is a string, the content of the tip will be the value of the target element attribute with that name (example "title", default); if this is a function, the content will be the value returned by the function, that can accept an argument that is the target element (see HowTo or Demo).
  • html: If the tooltip content must be interpreted as HTML code (default FALSE); if this is TRUE and content option is a function that returns an HTML element, inner HTML of that returned element is used as tip content.
  • balloon: TRUE if the tip is a balloon with a small triangle pointing the target element (default TRUE).
  • arrowSize: Size in pixel of the small triangle in the balloon (default 6).
  • arrowOffset: Distance in pixel of the small triangle from the edge of the balloon when center option is FALSE (default 6).
  • distance: Distance in pixel of the tip from the target element (default 3).
  • motion: Distance in pixel that the tip will cover during in/out animation (default 6).
  • motionOnShow: If the tip will animate when showing (default TRUE).
  • motionOnHide: If the tip will animate when hiding (default TRUE).
  • showOn: When to show the tip, can be any event of the target element (default "mouseenter"), or null when to never show the tip.
  • hideOn: When to hide the tip, can be any event of the target element (default "mouseleave"), or null when to never hide the tip.
  • hideOnTipOutsideClick: Will hide the tip if the mouse is clicked somewhere outside the tip itself or the triggering element (default FALSE). Especially useful for dialog-like tips which stay on the page until manual action.
  • discrete: Whether to show only one tip of the same group at the same time (default FALSE). The “same group” is considered the elements which have been passed to the FloatingTips instance in the constructor or being attach()ed later on.
  • showDelay: The delay the show event is fired (default 0).
  • hideDelay: The delay the hide event is fired (default 0).
  • className: The class name the tip container will get; necessary for styling (default "floating-tip").
  • identifier: An identifier for the tip instance, will be added as class name to the outermost tooltip element.
  • offset: An object like {x: 0, y: 0} (default), that specify the distance of the tip from its normal position.
  • fx: An object for additional Fx options (default @ {’duration’: ’short’}@).

Events:

• show(tip, element): Fires when the tip appears. tip is the tip element, target is the target element.
• hide(tip, element): Fires when the tip disappears. tip is the tip element, target is the target element.

Methods:

• attach(elements): Adds other elements that will trigger floating tips; can an be a string selector or an element collection.
• detach(elements): Remove floating tips triggering from elements; can an be a string selector or an element collection.
• show(element): Manually show the tip on target element.
• hide(element): Manually hide the tip for element.

FloatingTips.Dialog

Extends:

• FloatingTips

Syntax and options:

var myDialog = new FloatingTips.Dialog(element, text, options);

• elements (string or collection): Elements that will trigger floating tips; can an be a string selector or an element collection.
• text (string): Dialog text.
• options (object): Options for the class.
  • buttons: An object that represent the set of buttons displayed in the dialog. Use string keys for button label, and values to provide click callbacks in the form function(element, button, self).
  • buttonsClassName: CSS class name for displayed <button> elements, useful for styling.
  • showOn: When to show the dialog, can be any event of the target element (default "click").
  • hideOn: When to hide the dialog, can be any event of the target element (default "never").
  • (any other option from FloatingTips)

Methods:

• popup(): Manually show the dialog.
• dismiss(): Hide the dialog.

Elements

Methods:

• floatingTips(options): Creates a new instance of FloatingTips on elements.

Element

Methods:

• floatingTips(options): Creates a new instance of FloatingTips on the element.
• floatingTipsShow(): Show the the tip on the element.
• floatingTipsHide(): Hide the the tip on the element.
• floatingTipsToggle(): Toggles the the tip on the element.

Properties:

• floatingTips: Retrieves the instance of FloatingTips of the element.

   var myTips = $('myLink').get('floatingTips'); // Get instance