Mootools Forge documentation

README.md

@@ -5,3 +5,93 @@ A Mootools plugin for creating floating balloon tips that nicely appears when ho
 High customizable using options (tooltip position, centering, arrow size, distance, animation, etc).
 
 ![Screenshot](https://github.com/lorenzos/FloatingTips/raw/master/Graphics/logo.png)
+
+
+How to use
+----------
+
+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;
+	}
+
+
+Docs
+----
+
+**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" or "left" (default `"top"`).
+- **`center`**: If the tip will be placed centered on the target element (default `TRUE`).
+- **`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 (default `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.
+- **`balloon`**: `TRUE` if the tip is a balloon with a small triangle pointing the target element (default `TRUE`).
+- **`arrowSize`**: Size in pixel of the small triangle in the balloon (default `6`).
+- **`arrowOffset`**: Distance in pixel of the small triangle from the edge of the balloon when `center` option is `FALSE` (default `6`).
+- **`distance`**: Distance in pixel of the tip from the target element (default `3`).
+- **`motion`**: Distance in pixel that the tip will cover during in/out animation (default `6`).
+- **`motionOnShow`**: If the tip will animate when showing (default `TRUE`).
+- **`motionOnHide`**: If the tip will animate when hiding (default `TRUE`).
+- **`showDelay`**: The delay the show event is fired (default `0`).
+- **`hideDelay`**: The delay the hide event is fired (default `0`).
+- **`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 additional `Fx` 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 target `element`.
+- **`hide(element)`**: Manually hide the tip for `element`.

package.yml

@@ -1,6 +1,6 @@
 name: FloatingTips
 author: lorenzo.stanco
 category: Interface
-tags: [tip, tooltip, balloon]
+tags: [tip, tooltip, balloon, tips]
 docs: http://wiki.github.com/lorenzos/FloatingTips/docs
 current: 1.0