Installation
CSS Selectors
Event Handling
DOM Manipulation
Utilities
Data Structures
AJAX APIs
Animation APIs
Widgets Creation
How to create a widget using Nedil JS?
Widgets are UI components in a web application which are useful for a specific purpose. Nedil JS provides support for creating widgets which have full access to NedilJS apis. Nedil JS provides a default set of widgets which are quite handy to create user friendly interfaces. Few of those widgets are textbox, buttons, etc..
Step 1 : Load Nedil JS
HTML 
						<head>
						
							
							<script type="text/javascript" src="PATH_TO/Nedil.js"></script>
							
						</head>
Step 2 : Create Widget "Nedil.Widget.WIDGET_NAME = function( HTML_ELEMENT, CONFIG ) {}"
Nedil Widgets should be created using Nedil.Widget or $.Widget. It must be a function to define the properties and functionalities of a widget. It can return "this" reference to operate on those functionalities. It is advisable to keep widgets in a separate .js file and load it after Nedil.js. Widget can be created by inline javascipt also.
JS 
						Nedil.Widget.button = function(el,prop) {
							
							// widget functionality;
							
							return this;
						}
Static variable across all widgets of single widget type
There may be a need to have a common static value across all widgets of a single widget type. For example, to have unique IDs for all widgets of a particular widget type or to keep a count on how many widgets are created. This can be achieved by using Nedil.Widget.constants["NAME"].
JS 
						Nedil.Widget.button = function(el,prop) {
							
							// all button widgets can access these variables
							Nedil.Widget.constants["button"]
							Nedil.Widget.constants["button_map"]
							
							return this;
						}
To use the created widget
Custom widgets are created using Nedil.Widget. It should be applied to HTML elements in Nedil Objects. All the matched HTML elements will be converted to Nedil Custom Widgets.
JS 
			$.domLoaded(function() {
			
				// Create #btn1 into WIDGET with configuration from CONFIG_JSON
				$.get("#btn1").widget("WIDGET_NAME", CONFIG_JSON);
				
			}
How to create a ToolTip Widget using NedilJS - A Case Study
Create a tooltip widget which shows up when cursor moves over an element and hides when cursor moves out
Requirement
1. Show text related to source element when mouse cursor moves over it in a tooltip box.
2. Hide the tooltip box when mouse moves out ot the source element.
3. Tooltip text should be fetched from element's "nedil-tooltip" attribute.
4. Use little animation while showing and hiding tooltip box
5. Provide a configuration setting to change the color of text in tooltip box
6. Provide functionalities to enable or disable tooltip
Step 1 - Create a base tooltip widget and base CSS class
1. Create a base tooltip widget and save it in a separate .js file
2. Create a CSS class for tooltip_box.
3. Get specific tooltip text for element from "nedil-tooltip" attribute
4. Convert the HTML element to Nedil Object
5. Create a div child for body which is the tooltip box with css class"tooltip_box" and text from "nedil-tooltip" attribute
6. Return "this" object. It is advisable to store this to a local variable and return than local variable instead of returning "this" directly. In our case, "self" will be returned
JS CSS 
/*ToolTip widget*/
Nedil.Widget.tooltip = function(el, prop) {

	// widget reference variable
	var self = this;

	// get tooltip text from element attribute
	var tooltip_text = el.getAttribute("nedil-tooltip");
	
	// convert el to Nedil Object
	var ned_element = $.get(el);
	
	// create tooltip box with tooltip text and attach it to body
	var tooltip = $.get("body").addChild("div", { 
		"class" : "tooltip_box",
		"text"  : tooltip_text
	});
	
	// return self instead of this
	return self;	
}
	.tooltip_box {
		display : inline-block;
		position : absolute;
		padding : 10px;
		margin : 5px;		
		border : 1px solid #333;
		background-color : #aaa;
		max-width : 200px;
	}
Step 2 - Show and Hide tooltip box
1. When mouse hovers the source element, show tooltip box
2. When mouse moves out the element, hide tooltip box
3. Do some basic animation while showing and hiding tooltip box
4. Position the tooltip box exactly below the source element
JS 
	// hide tooltip
	tooltip.style("opacity", 0.1);
	tooltip.style("display","none");
	
	// on mouseover, show tooltip
	ned_element.on("mouseover", function() {
		showToolTip();
	});
	
	// on mouseout, hide tooltip
	ned_element.on("mouseout", function() {
		hideToolTip();
	});
	
	var showToolTip = function() {
	
		// show tooltip
		tooltip.style("display","inline-block");
		
		// position the tooltip
		el_pos = ned_element.posAbs();
		tooltip.posAbs({ x : el_pos.x, y : el_pos.y + ned_element.dim().ht});	
	
		// animate tooltip's opacity to 1
        tooltip.animate({
            from : 0.1,
            to : 1,
            anim : "CSS.smooth",
            prop : "opacity",
            duration : 1000
        });  
	}
	
	var hideToolTip = function() {
	
		// animate tooltip's to blur out
        tooltip.animate({
            from : 1,
            to : 0.1,
            anim : "CSS.smooth",
            prop : "opacity",
            duration : 500,
			oncomplete : function() {
				// hide tooltip
				tooltip.style("display","none");
			}
        });  
	}
Step 3 - Set a configuring option to style text color of tooltip
1. Configuring parameter is "color", if it is set use provided color, else default black color
2. Check "color" parameter is available, else use default color
JS 
	// config color
	prop = prop ? prop : {};
	var color = prop.color ? prop.color : "#000";
	tooltip.style("color", color);
Step 4 - Set Enable and Disable functionalities for ToolTip Widget
1. Create functions to handle the tooltip widget and attach them to "self"
2. Set a property like "self.enabled" and make it true by default
3. ShowToolTip and HideToolTip will check this property and execute.
4. if disable function is called, set self.enabled to false.
5. if enable function is called, set self.enabled to true.
JS 
						
	// set enabled property to true
	self.enabled = true;
	
	// access apis
	self.disable = function() {
		self.enabled = false;
	}
	
	self.enable = function() {
		self.enabled = true;
	}
Final Result
If the Nedil.Objs is a collection of html elements, then widget function will return an Array of "self" object. If the Nedil.Objs match with single HTML Element, the widget will directly return "self" object, thru which we can access properties and functions of Widget

Enhancement Tips:
1. Config parameters can be given for position of the tooltip box, CSS class of the tooltip box and even more
2. Accomodate images in tooltip
3. Use an image to have arrow mark with tooltip
JS ToolTip Widget JS HTML CSS 
		$.domLoaded(function() {
			
			// create tooltips for elements with source class
			var toolTips = $.get(".source").widget("tooltip", { color : "green"});
			
			$.get("#dis").on("click", function() {
				if($.self().element().value == "Disable Tooltip for One") {
					$.self().element().value = "Enable Tooltip for One";
					
					// disable tooltip [0] 
					toolTips[0].disable();
				} else {
					$.self().element().value = "Disable Tooltip for One";
					
					// enable tooltip [0] 
					toolTips[0].enable();
				}
			});
			
		});	
/*ToolTip widget*/
Nedil.Widget.tooltip = function(el, prop) {

	// widget reference variable
	var self = this;
	
	// set enabled property to true
	self.enabled = true;

	// get tooltip text from element attribute
	var tooltip_text = el.getAttribute("nedil-tooltip");
	
	// convert el to Nedil Object
	var ned_element = $.get(el);
	
	// create tooltip box with tooltip text and attach it to body
	var tooltip = $.get("body").addChild("div", { 
		"class" : "tooltip_box",
		"text"  : tooltip_text
	});
	
	// position the tooltip
	el_pos = ned_element.posAbs();
	tooltip.posAbs({ x : el_pos.x, y : el_pos.y + ned_element.dim().ht});		
	
	// config color
	prop = prop ? prop : {};
	var color = prop.color ? prop.color : "#000";
	tooltip.style("color", color);
	
	// hide tooltip
	tooltip.style("opacity", 0.1);
	tooltip.style("display","none");
	
	// on mouseover, show tooltip	
	ned_element.on("mouseover", function() {
		if(self.enabled) {
			showToolTip();
		}
	});

	// on mouseout, hide tooltip	
	ned_element.on("mouseout", function() {
		if(self.enabled) {
			hideToolTip();
		}
	});
	
	var showToolTip = function() {
	
		// show tooltip
		tooltip.style("display","inline-block");
		
		// position the tooltip
		el_pos = ned_element.posAbs();
		tooltip.posAbs({ x : el_pos.x, y : el_pos.y + ned_element.dim().ht});
	
		// animate tooltip's opacity to 1
        tooltip.animate({
            from : 0.1,
            to : 1,
            anim : "CSS.smooth",
            prop : "opacity",
            duration : 1000
        });  
	}
	
	var hideToolTip = function() {
	
		// animate tooltip's to blur out
        tooltip.animate({
            from : 1,
            to : 0.1,
            anim : "CSS.smooth",
            prop : "opacity",
            duration : 500,
			oncomplete : function() {
				// hide tooltip
				tooltip.style("display","none");
			}
        });  
	}	
	
	// access apis
	self.disable = function() {
		self.enabled = false;
	}
	
	self.enable = function() {
		self.enabled = true;
	}	
	
	// return self instead of this	
	return self;	
}
<head>	

	<script type="text/javascript" src="Nedil.js"></script>
	<script type="text/javascript" src="widget_custom.js"></script>
	
</head>

<body>

	<div class="source" nedil-tooltip="A small tooltip">One</div>
	<div class="source" nedil-tooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">Two</div>
	
	<input type="button" id="dis" value="Disable Tooltip for One" />


</body>
	.tooltip_box {
		display : inline-block;
		position : absolute;
		padding : 10px;
		margin : 5px;		
		border : 1px solid #333;
		background-color : #ccc;
		max-width : 200px;
	}
	
	.source {
		cursor : default;
		display : inline-block;
		border: 1px solid red;
		padding : 10px;
		margin : 5px;
	}
Result