A Mootools plugin for creating floating balloon tips that nicely appears when hovering an element.
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);
Options:
"top"
).FALSE
). This allows you to have tips on fixed elements, that do no scroll on page scrolling.TRUE
)."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).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.TRUE
if the tip is a balloon with a small triangle pointing the target element (default TRUE
).6
).center
option is FALSE
(default 6
).3
).6
).TRUE
).TRUE
)."mouseenter"
), or null
when to never show the tip."mouseleave"
), or null
when to never hide the tip.FALSE
). Especially useful for dialog-like tips which stay on the page until manual action.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.0
).0
)."floating-tip"
).{x: 0, y: 0}
(default), that specify the distance of the tip from its normal position.Fx
options (default {'duration': 'short'}
).Events:
tip
is the tip element, element
is the target element.tip
is the tip element, element
is the target element.Methods:
element
.element
.element
.Element and Elements methods:
You can use some shortcut methods on Element and Elements for creating and showing tips.
#JS
$$('a').floatingTips(options); // Create tips
$('myLink').floatingTipsShow(); // Show one
var myTips = $('myLink').get('floatingTips'); // Get instance
FloatingTips.Dialog is an extra class that extends FloatingTips to let you create dialog boxes that appears near target element (for example, on an important link for asking for confirmation).
To learn more on how to use it, see HowTo and Docs wiki pages on Github.