A Mootools plugin for creating floating balloon tips that nicely appears when hovering an element. High customizable using options (tooltip position, centering, arrow size, distance, animation, etc).
JS sample:
#JS
// Create a simple tips for all <a> elements
new FloatingTips('a'); // Title attribute will be used as tip.
// A customized tip for all <span class="custom"> elements
new FloatingTips('span.custom', {
// Content can also be a function of the target element!
content: function(e) { return 'I am ' + e.getSize().x + ' px wide! :)'; },
position: 'bottom', // Bottom positioned
center: false, // Place the tip aligned with target
arrowSize: 12, // A bigger arrow!
});
HTML code:
#HTML
<a href="#" title="This is a tooltip">Simple tip</a>
<span class="custom">Custom tip</span>
CSS tip styling:
#CSS
.floating-tip {
background-color: black;
padding: 5px 15px;
color: #dddddd;
font-weight: bold;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
Implements: Options, Events
Syntax:
#JS
var myTips = new FloatingTips(elements, options);
elements
: Elements that will trigger floating tips; can an be a string selector or an element collection.
Options (object): Initial options for the class. Options are:
position
: Tip position, can be "top", "right", "bottom", "left" or "inside" (default"top"
).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 How to use 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"
).hideOn
: When to hide the tip, can be any event of the target element (default"mouseleave"
).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"
).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'}
).
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.show(element)
: Manually show the tip on targetelement
.hide(element)
: Manually hide the tip forelement
.