HowTo

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();
			}
		}
	});