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 (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, use null to disable auto-show (default "mouseenter").
  • hideOn: When to hide the tip, can be any event of the target element, use null to disable auto-hide (default "mouseleave").
  • 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").
  • 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.