diff --git a/demo/angular-hovercard.css b/demo/angular-hovercard.css
index b5bbc4f..2886aad 100644
--- a/demo/angular-hovercard.css
+++ b/demo/angular-hovercard.css
@@ -1,6 +1,6 @@
 /**
  * Angular hovercard directive.
- * @version v1.0.3 - 2015-06-29
+ * @version v1.0.3 - 2015-10-20
  * @link https://github.com/yaru22/angular-hovercard
  * @author Brian Park <yaru22@gmail.com>
  * @license MIT License, http://www.opensource.org/licenses/MIT
diff --git a/demo/angular-hovercard.js b/demo/angular-hovercard.js
index 8cecba4..b961af2 100644
--- a/demo/angular-hovercard.js
+++ b/demo/angular-hovercard.js
@@ -1,6 +1,6 @@
 /**
  * Angular hovercard directive.
- * @version v1.0.3 - 2015-06-29
+ * @version v1.0.3 - 2015-10-20
  * @link https://github.com/yaru22/angular-hovercard
  * @author Brian Park <yaru22@gmail.com>
  * @license MIT License, http://www.opensource.org/licenses/MIT
@@ -58,7 +58,28 @@ angular.module('yaru22.hovercard', ['yaru22.hovercard.tmpls']).directive('hoverc
           $scope.hoverCardStyle.left = '-1em';
           $scope.hoverCardStyle.right = '';
         }
-      }  // if (placement)
+      }
+      // if (placement)
+      var triggerEvent = 'mouseenter';
+      if ($attrs.trigger) {
+        triggerEvent = $attrs.trigger;
+      }
+      var show = function () {
+        $scope.show.card = true;
+        if ($scope.onHoverIn) {
+          $scope.onHoverIn();
+        }
+      };
+      $scope.showMouse = function () {
+        if (triggerEvent === 'mouseenter') {
+          show();
+        }
+      };
+      $scope.showClick = function () {
+        if (triggerEvent === 'click') {
+          show();
+        }
+      };
     }  // link function
   };
 });
@@ -66,6 +87,6 @@ angular.module('yaru22.hovercard.tmpls', []).run([
   '$templateCache',
   function ($templateCache) {
     'use strict';
-    $templateCache.put('template/angular-hovercard.tmpl', '<div class=angular-hovercard ng-mouseenter="showCard = true; onHoverIn()" ng-mouseleave="showCard = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': showCard }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': showCard }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>');
+    $templateCache.put('template/angular-hovercard.tmpl', '<div class=angular-hovercard ng-click=showClick() ng-mouseenter=showMouse() ng-mouseleave="show.card = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': show.card }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': show.card }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>');
   }
 ]);
\ No newline at end of file
diff --git a/dist/angular-hovercard.css b/dist/angular-hovercard.css
index b5bbc4f..2886aad 100644
--- a/dist/angular-hovercard.css
+++ b/dist/angular-hovercard.css
@@ -1,6 +1,6 @@
 /**
  * Angular hovercard directive.
- * @version v1.0.3 - 2015-06-29
+ * @version v1.0.3 - 2015-10-20
  * @link https://github.com/yaru22/angular-hovercard
  * @author Brian Park <yaru22@gmail.com>
  * @license MIT License, http://www.opensource.org/licenses/MIT
diff --git a/dist/angular-hovercard.js b/dist/angular-hovercard.js
index 8cecba4..b961af2 100644
--- a/dist/angular-hovercard.js
+++ b/dist/angular-hovercard.js
@@ -1,6 +1,6 @@
 /**
  * Angular hovercard directive.
- * @version v1.0.3 - 2015-06-29
+ * @version v1.0.3 - 2015-10-20
  * @link https://github.com/yaru22/angular-hovercard
  * @author Brian Park <yaru22@gmail.com>
  * @license MIT License, http://www.opensource.org/licenses/MIT
@@ -58,7 +58,28 @@ angular.module('yaru22.hovercard', ['yaru22.hovercard.tmpls']).directive('hoverc
           $scope.hoverCardStyle.left = '-1em';
           $scope.hoverCardStyle.right = '';
         }
-      }  // if (placement)
+      }
+      // if (placement)
+      var triggerEvent = 'mouseenter';
+      if ($attrs.trigger) {
+        triggerEvent = $attrs.trigger;
+      }
+      var show = function () {
+        $scope.show.card = true;
+        if ($scope.onHoverIn) {
+          $scope.onHoverIn();
+        }
+      };
+      $scope.showMouse = function () {
+        if (triggerEvent === 'mouseenter') {
+          show();
+        }
+      };
+      $scope.showClick = function () {
+        if (triggerEvent === 'click') {
+          show();
+        }
+      };
     }  // link function
   };
 });
@@ -66,6 +87,6 @@ angular.module('yaru22.hovercard.tmpls', []).run([
   '$templateCache',
   function ($templateCache) {
     'use strict';
-    $templateCache.put('template/angular-hovercard.tmpl', '<div class=angular-hovercard ng-mouseenter="showCard = true; onHoverIn()" ng-mouseleave="showCard = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': showCard }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': showCard }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>');
+    $templateCache.put('template/angular-hovercard.tmpl', '<div class=angular-hovercard ng-click=showClick() ng-mouseenter=showMouse() ng-mouseleave="show.card = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': show.card }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': show.card }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>');
   }
 ]);
\ No newline at end of file
diff --git a/dist/angular-hovercard.min.js b/dist/angular-hovercard.min.js
index 9c3585b..4d88ba3 100644
--- a/dist/angular-hovercard.min.js
+++ b/dist/angular-hovercard.min.js
@@ -1,8 +1,8 @@
 /**
  * Angular hovercard directive.
- * @version v1.0.3 - 2015-06-29
+ * @version v1.0.3 - 2015-10-20
  * @link https://github.com/yaru22/angular-hovercard
  * @author Brian Park <yaru22@gmail.com>
  * @license MIT License, http://www.opensource.org/licenses/MIT
  */
-"use strict";angular.module("yaru22.hovercard",["yaru22.hovercard.tmpls"]).directive("hovercard",function(){return{restrict:"E",transclude:!0,templateUrl:"template/angular-hovercard.tmpl",scope:!0,link:function(a,b,c){a.show={},a.show.card=!1,a.hoverTmplUrl=c.hoverTmplUrl,a.onHoverIn=a.$eval(c.onHoverIn),a.onHoverOut=a.$eval(c.onHoverOut);var d=c.placement||"bottomRight";if(a.hoverLabelStyle={},c.labelColor&&(a.hoverLabelStyle.color=c.labelColor),a.hoverCardStyle={},c.background&&(a.hoverCardStyle.background=c.background),c.width&&(a.hoverCardStyle.width=c.width),d){var e=d.replace(/([A-Z])/g," $1").toLowerCase().split(" "),f={};f[e[0]]=!0,f[e[1]]=!0,f.bottom&&(a.hoverCardStyle.bottom="",a.hoverCardStyle.top="-1em",a.hoverCardStyle["padding-bottom"]="",a.hoverCardStyle["padding-top"]="3em"),f.top&&(a.hoverCardStyle.bottom="-1em",a.hoverCardStyle.top="",a.hoverCardStyle["padding-bottom"]="3em",a.hoverCardStyle["padding-top"]=""),f.left&&(a.hoverCardStyle.left="",a.hoverCardStyle.right="-1em"),f.right&&(a.hoverCardStyle.left="-1em",a.hoverCardStyle.right="")}}}}),angular.module("yaru22.hovercard.tmpls",[]).run(["$templateCache",function(a){a.put("template/angular-hovercard.tmpl",'<div class=angular-hovercard ng-mouseenter="showCard = true; onHoverIn()" ng-mouseleave="showCard = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': showCard }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': showCard }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>')}]);
\ No newline at end of file
+"use strict";angular.module("yaru22.hovercard",["yaru22.hovercard.tmpls"]).directive("hovercard",function(){return{restrict:"E",transclude:!0,templateUrl:"template/angular-hovercard.tmpl",scope:!0,link:function(a,b,c){a.show={},a.show.card=!1,a.hoverTmplUrl=c.hoverTmplUrl,a.onHoverIn=a.$eval(c.onHoverIn),a.onHoverOut=a.$eval(c.onHoverOut);var d=c.placement||"bottomRight";if(a.hoverLabelStyle={},c.labelColor&&(a.hoverLabelStyle.color=c.labelColor),a.hoverCardStyle={},c.background&&(a.hoverCardStyle.background=c.background),c.width&&(a.hoverCardStyle.width=c.width),d){var e=d.replace(/([A-Z])/g," $1").toLowerCase().split(" "),f={};f[e[0]]=!0,f[e[1]]=!0,f.bottom&&(a.hoverCardStyle.bottom="",a.hoverCardStyle.top="-1em",a.hoverCardStyle["padding-bottom"]="",a.hoverCardStyle["padding-top"]="3em"),f.top&&(a.hoverCardStyle.bottom="-1em",a.hoverCardStyle.top="",a.hoverCardStyle["padding-bottom"]="3em",a.hoverCardStyle["padding-top"]=""),f.left&&(a.hoverCardStyle.left="",a.hoverCardStyle.right="-1em"),f.right&&(a.hoverCardStyle.left="-1em",a.hoverCardStyle.right="")}var g="mouseenter";c.trigger&&(g=c.trigger);var h=function(){a.show.card=!0,a.onHoverIn&&a.onHoverIn()};a.showMouse=function(){"mouseenter"===g&&h()},a.showClick=function(){"click"===g&&h()}}}}),angular.module("yaru22.hovercard.tmpls",[]).run(["$templateCache",function(a){a.put("template/angular-hovercard.tmpl",'<div class=angular-hovercard ng-click=showClick() ng-mouseenter=showMouse() ng-mouseleave="show.card = false; onHoverOut()"><label class=angular-hovercard-label ng-class="{ \'angular-hovercard-active\': show.card }" ng-style=hoverLabelStyle ng-transclude></label><div class=angular-hovercard-detail ng-class="{ \'angular-hovercard-active\': show.card }" ng-include=hoverTmplUrl ng-style=hoverCardStyle></div></div>')}]);
\ No newline at end of file
diff --git a/src/angular-hovercard.js b/src/angular-hovercard.js
index 9fbad3b..b771e5c 100644
--- a/src/angular-hovercard.js
+++ b/src/angular-hovercard.js
@@ -63,6 +63,31 @@ angular.module('yaru22.hovercard', [
           $scope.hoverCardStyle.right = '';
         }
       }  // if (placement)
+
+      var triggerEvent = 'mouseenter';
+      if ($attrs.trigger) {
+        triggerEvent = $attrs.trigger;
+      } 
+
+      var show = function() {
+        $scope.show.card = true;
+        if ($scope.onHoverIn) {
+          $scope.onHoverIn();
+        }
+      };
+
+      $scope.showMouse = function () {
+        if (triggerEvent === 'mouseenter') {
+          show();
+        }
+      };
+
+      $scope.showClick = function () {
+        if (triggerEvent === 'click') {
+          show();
+        }
+      };
+
     }  // link function
   };
 });
diff --git a/template/angular-hovercard.tmpl b/template/angular-hovercard.tmpl
index 39a97e5..819dca1 100644
--- a/template/angular-hovercard.tmpl
+++ b/template/angular-hovercard.tmpl
@@ -1,4 +1,4 @@
-<div class="angular-hovercard" ng-mouseenter="showCard = true; onHoverIn()" ng-mouseleave="showCard = false; onHoverOut()">
-  <label class="angular-hovercard-label" ng-class="{ 'angular-hovercard-active': showCard }" ng-style="hoverLabelStyle" ng-transclude></label>
-  <div class="angular-hovercard-detail" ng-class="{ 'angular-hovercard-active': showCard }" ng-include="hoverTmplUrl" ng-style="hoverCardStyle"></div>
-</div>
+<div class="angular-hovercard" ng-click="showClick()" ng-mouseenter="showMouse()" ng-mouseleave="show.card = false; onHoverOut()">
+  <label class="angular-hovercard-label" ng-class="{ 'angular-hovercard-active': show.card }" ng-style="hoverLabelStyle" ng-transclude></label>
+  <div class="angular-hovercard-detail" ng-class="{ 'angular-hovercard-active': show.card }" ng-include="hoverTmplUrl" ng-style="hoverCardStyle"></div>
+</div>
\ No newline at end of file
diff --git a/test/unit/hovercardSpec.js b/test/unit/hovercardSpec.js
index 12e37ec..455851a 100644
--- a/test/unit/hovercardSpec.js
+++ b/test/unit/hovercardSpec.js
@@ -27,14 +27,14 @@ describe('hovercard', function() {
 
 
   it('should create a label', inject(function() {
-    var label = elm.find('.angular-hovercard-label');
+    var label = angular.element(elm[0].querySelector('.angular-hovercard-label')); //elm.find('.angular-hovercard-label');
 
     expect(label).to.have.length(1);
     expect(label.eq(0).text().trim()).to.equal('Brian Park');
   }));
 
   it('should load template specified on hover-tmpl-url', inject(function() {
-    var detail = elm.find('.angular-hovercard-detail');
+    var detail = angular.element(elm[0].querySelector('.angular-hovercard-detail'));
 
     expect(detail).to.have.length(1);
     expect(detail.eq(0).text().trim()).to.equal('Hover card detail.');