-
Notifications
You must be signed in to change notification settings - Fork 9
Docs
Lorenzo Stanco edited this page Jun 28, 2021
·
32 revisions
For an usage example see HowTo or a complete Demo.
- Options
- Events
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 (defaultFALSE
). 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 (defaultTRUE
). -
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 (defaultFALSE
); if this is TRUE andcontent
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 (defaultTRUE
). -
arrowSize
: Size in pixel of the small triangle in the balloon (default6
). -
arrowOffset
: Distance in pixel of the small triangle from the edge of the balloon whencenter
option isFALSE
(default6
). -
distance
: Distance in pixel of the tip from the target element (default3
). -
motion
: Distance in pixel that the tip will cover during in/out animation (default6
). -
motionOnShow
: If the tip will animate when showing (defaultTRUE
). -
motionOnHide
: If the tip will animate when hiding (defaultTRUE
). -
showOn
: When to show the tip, can be any event of the target element (default"mouseenter"
), ornull
when to never show the tip. -
hideOn
: When to hide the tip, can be any event of the target element (default"mouseleave"
), ornull
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 (defaultFALSE
). 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 (defaultFALSE
). The “same group” is considered the elements which have been passed to theFloatingTips
instance in the constructor or beingattach()
ed later on. -
showDelay
: The delay the show event is fired (default0
). -
hideDelay
: The delay the hide event is fired (default0
). -
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 additionalFx
options (default @ {’duration’: ’short’}@).
-
-
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.
-
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 targetelement
. -
hide(element)
: Manually hide the tip forelement
.
- FloatingTips
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 formfunction(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)
-
-
popup()
: Manually show the dialog. -
dismiss()
: Hide the dialog.
-
floatingTips(options)
: Creates a new instance of FloatingTips on elements.
-
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.
-
floatingTips
: Retrieves the instance of FloatingTips of the element.
var myTips = $('myLink').get('floatingTips'); // Get instance