Add optional close button

Readme.md

@@ -152,6 +152,12 @@ You can set your tooltip to show/hide on specific event/events, you can use the
 <a href="#" tooltips tooltip-title="tip" tooltip-show-trigger="mouseover click" tooltip-hide-trigger="click" tooltip-side="left">Show tooltip on click and mouseover and hide tooltip only on click</a>
 ```
 
+If you want to hide on click, you can configure a close button using text or HTML. This allows your users to click the button inside the tooltip instead of clicking on the original trigger.
+```html
+<a href="#" tooltips tooltip-title="tip" tooltip-show-trigger="mouseover click" tooltip-hide-trigger="click" tooltip-close-button="x" tooltip-side="left">Show tooltip on click and mouseover and hide tooltip only on click, with option to click on the X</a>
+<a href="#" tooltips tooltip-title="tip" tooltip-show-trigger="mouseover click" tooltip-hide-trigger="click" tooltip-close-button='<button type="button">Close Me!</button>' tooltip-side="left">Show tooltip on click and mouseover and hide tooltip only on click, with option to click on HTML button</a>
+```
+
 ####Tooltip CSS class
 You can set a custom CSS class or a set of, using the  `tooltip-class=""` attribute:
 ```html

index.html

@@ -90,6 +90,21 @@
     </a>
   </div>
   <div class="separator100"></div>
+
+  <div class="separator30"></div>
+  <div>
+    <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man!" tooltip-show-trigger="mouseover click" tooltip-hide-trigger="click" tooltip-close-button='<button type="button">Close Me!</button>' tooltip-side="top">
+      Close button: hover to open, click to close
+    </a>
+  </div>
+
+  <div class="separator30"></div>
+  <div>
+    <a class="btn btn-medium bg-info color-white font-bold" tooltips tooltip-content="Yeo man! I have some more to say to show the positioning of the close button" tooltip-show-trigger="click" tooltip-hide-trigger="click" tooltip-close-button='<button type="button">Close Me!</button>' tooltip-side="bottom">
+      Close button: click to open and close
+    </a>
+  </div>
+  <div class="separator100"></div>
 </div>
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script>

src/css/angular-tooltips.css

@@ -119,3 +119,6 @@
   border-left-color: transparent;
   border-top-width: 0;
 }
+._720kb-tooltip-close-button {
+  float: right;
+}

src/js/angular-tooltips.js

@@ -37,11 +37,17 @@
           , className = attr.tooltipClass || ''
           , speed = (attr.tooltipSpeed || 'medium').toLowerCase()
           , lazyMode = typeof attr.tooltipLazy !== 'undefined' && attr.tooltipLazy !== null ? $scope.$eval(attr.tooltipLazy) : true
-          , htmlTemplate =
-              '<div class="_720kb-tooltip ' + CSS_PREFIX + size + '">' +
-              '<div class="' + CSS_PREFIX + 'title"> ' + title + '</div>' +
-              content + ' <span class="' + CSS_PREFIX + 'caret"></span>' +
-              '</div>';
+          , hasCloseButton = typeof attr.tooltipCloseButton !== 'undefined' && attr.tooltipCloseButton !== null
+          , closeButtonContent = attr.tooltipCloseButton || ''
+          , htmlTemplate = '<div class="_720kb-tooltip ' + CSS_PREFIX + size + '">';
+
+        if (hasCloseButton) {
+          htmlTemplate = htmlTemplate + '<span class="' + CSS_PREFIX + 'close-button" ng-click="hideTooltip()"> ' + closeButtonContent + ' </span>';
+        }
+
+        htmlTemplate = htmlTemplate + '<div class="' + CSS_PREFIX + 'title"> ' + title + '</div>' +
+                                      content + ' <span class="' + CSS_PREFIX + 'caret"></span>' +
+                                      '</div>';
 
         //parse the animation speed of tooltips
         $scope.parseSpeed = function parseSpeed () {