Bootstrap popover to Angular Directive Example

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="popover.js"></script>
    <script src="tooltip.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="FirstController">
    <h1 ng-bind="heading"></h1>

    <div class="container">
      <div class="row">
        <a class="btn btn-large" href="#" my-popover tooltip popover-title="Wassup"
    popover-content="Popover is a very important thing to use because it is the best element in the whole wide world"
    popover-trigger="click" tooltip-trigger="hover" tooltip-html="true" tooltip-placement="right" tooltip-title="This is the <b>button</b> {{size}}">Using attributes</a>
      </div>
      <div class="row">
        <a class="btn btn-large" href="#" my-popover="options" tooltip tooltip-html="false" tooltip-placement="bottom" tooltip-title="This HTML is <i>escaped</i> {{size}}">Using config object</a>
      </div>
    </div>
  </body>

</html>

var app = angular.module("myApp", ["my.popover", "my.tooltip"]);

app.config(function($popoverProvider, $tooltipProvider) {
  angular.extend($popoverProvider.defaults, {
    html: true,
    animation: true
  });
  angular.extend($tooltipProvider.defaults, {
        trigger: "hover",
        placement: "top",
        animation: true,
        html: true
  });
})

app.controller("FirstController", function($scope) {
  $scope.heading = "Bootstrap Popover to Angular Directive";
  $scope.options = {
    title: "Config object example",
    content: "This uses a <strong>JSON</strong> object from parent <a href='https://docs.angularjs.org/api/ng/directive/ngController'>controller</a> to configure the popover",
    trigger: "click",
    placement: "bottom"
  };
  $scope.size = "43.5 MB";
});

/* Styles go here */

# Simple (no-rewrite) bootstrap popover as an angular directive

'use strict';

var app = angular.module("my.popover", []);

app.provider("$popover", [function() {
  var defaults = this.defaults = {
    trigger: "click",
    placement: "bottom"
  }
  
  this.$get = function() {
    function factory(config) {
      var poppy = {};
      
      var options = angular.extend({}, defaults, config);
      
      poppy.options = options;
      
      return poppy;
    }
    return factory;
  }
}]);

app.directive("myPopover", ["$popover", function($popover) {
  return {
    restrict: "AE",
    scope: {
      popoverTitle: "@",
      popoverContent: "@",
      popoverTrigger: "@",
      popoverPlacement: "@",
      myPopover: "="
    },
    link: function(scope, element, attr) {
      var options;
      console.log(attr);
      if(angular.isDefined(scope.myPopover) && angular.isObject(scope.myPopover)) {
        options = $popover(scope.myPopover).options;
        element.popover(options);
      }
      else {
        options = {
          title: attr.popoverTitle || "",
          content: attr.popoverContent || "",
          trigger: attr.popoverTrigger || "click",
          placement: attr.popoverPlacement || "right"
        };
        element.popover($popover(options).options);
      }
    }
  }
}])

'use strict';

var app = angular.module("my.tooltip", []);
app.provider("$tooltip", [function() {
    var defaults = this.defaults = {
        trigger: "hover",
        placement: "top",
        animation: true,
        html: true
    };

    this.$get = function() {
        function tooltipFactory(config) {
            var tool = {};

            var options = angular.extend({}, defaults, config);

            tool.options = options;

            return tool;
        }
        return tooltipFactory;
    }
}]);

app.directive("tooltip", ["$tooltip", "$parse", function($tooltip, $parse) {
    return {
        restrict: "A",
        link: function(scope, element, attr) {
            if(!!attr.tooltipHtml) {
              if(attr.tooltipHtml === "true") {
                attr.tooltipHtml = true;
              }
              else if(attr.tooltipHtml === "false") {
                attr.tooltipHtml = false;
              }
              else {
                attr.tooltipHtml = false;
              }
            }
            var options = {
                title: attr.tooltipTitle || "",
                delay: attr.tooltipDelay || 500,
                trigger: attr.tooltipTrigger || "hover",
                placement: attr.tooltipPlacement || "top",
                html: attr.tooltipHtml || false,
                animation: attr.tooltipAnimation || true
            }
            element.tooltip($tooltip(options).options);
        }
    }
}]);