-
Notifications
You must be signed in to change notification settings - Fork 9
HowTo
lorenzos edited this page Feb 24, 2012
·
1 revision
Examples rule! See also Docs.
JS sample:
// Create a simple tips for all <a> elements new FloatingTips('a'); // Title attribute will be used as tip.
// Or, equivalent: $$('a').floatingTips();
// 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:
<a href="#" title="This is a tooltip">Simple tip</a>
<span class="custom">Custom tip</span>
CSS tip styling:
.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;
}
JS sample for FloatingTips.Dialog:
// Create a simple dialog
new FloatingTips.Dialog($('myConfirmLink'), 'Are you sure?', {
buttons: {
'Yes': function(element, button) {
button.set('disabled', true);
window.location.href = element.getProperty('href');
},
'No': function(element, button, dialog) {
dialog.dismiss();
// Or this.dimiss();
}
}
});