highlight elements in modals modals, cleanup

Author: npedrini

README.md

@@ -4,9 +4,21 @@ An angular [bower](http://bower.io/) component for creating simple tutorials.
 
 ##Installation##
 
+###Build###
+
 	bower install angular-tutorial
-	cd [repo location]
+	cd bower_components/angular-tutorial
     npm install && bower install && grunt
+  
+###Include Dependencies###
+
+Angular Tutorial depends on [UI Bootstrap](http://angular-ui.github.io/bootstrap/)'s Modal and [Bootstrap](http://getbootstrap.com/)'s tooltip (we're forced to use Bootstrap's native tooltip until UI Bootstrap's tooltip supports programmatic triggers). 
+
+Make sure they are included in the page along with the `angular-tutorial` source:
+
+	<script type="text/javascript" src="bower_components/bootstrap/js/tooltip.js"></script>
+	<script type="text/javascript" src="bower_components/angular-ui-bootstrap/dist/ui-bootstrap-custom-tpls-0.10.0.js"></script>
+	<script type="text/javascript" src="bower_components/angular-tutorial/angular-tutorial.js"></script>
 
 ##Usage##
 
@@ -27,7 +39,6 @@ Register a tutorial:
 	 			(
 	 				"tutorial1",		//id
 	 				{},					//config
-	 				"My Tutorial",		//name
 	 				[					//steps
 	 			 		{
 							type: "showMessage",
@@ -58,31 +69,35 @@ The `waitForClick` step type tells the tutorial to wait for one of the specified
 
 Properties
 
-- `selectors` One or more [css selectors](http://www.w3schools.com/cssref/css_selectors.asp) to target (Array)
-- `tooltips` Tooltips to show for the corresponding `selector` (Array) 
-  -  Tooltip properties:
-	 - `text` Text to display in the tooltip (String)
-	 - `placement` One of top, right, bottom or left (String)
+- `highlight` One or more [css selectors](http://www.w3schools.com/cssref/css_selectors.asp) to hightlight via a cutout in the backdrop (defaults to `targets` if unspecified) (Array)
+- `targets` One or more [css selectors](http://www.w3schools.com/cssref/css_selectors.asp) representing click targets (Array)
+- `tooltips` Tooltips to show (Array) 
+   Tooltip Properties
+   - `selector` CSS selector to affix the tooltip to (String, required)
+   - `text` Text to display in the tooltip (String)
+   - `placement` One of top, right, bottom or left (String)
 
 ####waitForNavigate#####
 
 The `waitForNavigate` step type tells the tutorial to wait for a change to `$location.path()`.
 
 Properties
-					
-- `path` The value `$location.path()` must be set to to continue (String, required)
-- `selectors` One or more [css selectors](http://www.w3schools.com/cssref/css_selectors.asp) to target (Array)
+
+- `highlight` One or more [css selectors](http://www.w3schools.com/cssref/css_selectors.asp) to hightlight via a cutout in the backdrop (defaults to `targets` if unspecified) (Array)
+- `path` The change in `$location.path()` to wait for (String, required)
+- `targets` One or more [css selectors](http://www.w3schools.com/cssref/css_selectors.asp) representing click targets (Array)
 - `tooltips` Tooltips to show for the corresponding `selector` (Array) 
-  -  Tooltip properties:
-	 - `text` Text to display in the tooltip (String)
-	 - `placement` One of top, right, bottom or left (String)
+   Tooltip Properties
+   - `selector` CSS selector to affix the tooltip to (String, required)</li>
+   - `text` Text to display in the tooltip (String)
+   - `placement` One of top, right, bottom or left (String)
 
 ####showMessage####
-				
+
 The `showMessage` step type tells the tutorial to show a message using [ui-bootstrap](http://angular-ui.github.io/bootstrap/)'s `$modal` service
 
 Properties
-					
+			
 - `message` The message to display (String/Object, required) 
   If the message is an Object, the following properties are supported
   - `message` Text to display in the tooltip (String, required)