title: AngularJS - Bootstrap popover with different tooltip on hover and click
body: <p>Is there an easy way to have one tooltip for hovering and then another one for when you click it?</p>
  
  <p>On hover:</p>
  
  <pre><code>&lt;span data-toggle="popover" data-trigger="hover" data-content="Click to show details"&gt;{{ someData }}&lt;/span&gt;
  </code></pre>
  
  <p>On click:</p>
  
  <pre><code>&lt;span data-toggle="popover" title="More details" data-trigger="hover" data-html="true" data-content="{{ someDetailedData }}"&gt;{{ someData }}&lt;/span&gt;
  </code></pre>
  
  <p>Just using this directive to wrap the boostrap popover:</p>
  
  <pre><code>(function() {
      "use strict";
  
      angular
          .module("app.utils")
          .directive("toggle", function() {
              return {
                  restrict: "A",
                  link: function(scope, element, attrs) {
                      if (attrs.toggle == "tooltip") {
                          $(element).tooltip();
                      }
                      if (attrs.toggle == "popover") {
                          $(element).popover();
                      }
                  }
              };
          });
  })();
  </code></pre>