create a new directive: question mark with tooltip

- Display a rounded blue question mark icon
 - Show (hide) on click a blue tooltip on top of the question mark icon

app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee

@@ -0,0 +1,17 @@
+Darkswarm.directive "questionMarkWithTooltip", ($tooltip)->
+  # We use the $tooltip service from Angular foundation to give us boilerplate
+  # Subsequently we patch the scope, template and restrictions
+  tooltip = $tooltip 'questionMarkWithTooltip', 'questionMarkWithTooltip', 'click'
+  tooltip.scope =
+    variant: "="
+  tooltip.templateUrl = "question_mark_with_tooltip_icon.html"
+  tooltip.replace = true
+  tooltip.restrict = 'E'
+  tooltip
+
+# This is automatically referenced via naming convention in $tooltip
+Darkswarm.directive 'questionMarkWithTooltipPopup', ->
+  restrict: 'EA'
+  replace: true
+  templateUrl: 'question_mark_with_tooltip.html'
+  scope: false

app/assets/javascripts/templates/question_mark_with_tooltip.html.haml

@@ -0,0 +1,8 @@
+.joyride-tip-guide.question-mark-tooltip{ng: {class: "{ in: tt_isOpen, fade: tt_animation }", show: "tt_isOpen"}}
+  .background{ng: {click: "tt_isOpen = false"}}
+  .joyride-content-wrapper
+    This is the unit price of this item. 
+    %br/
+    It allows you to compare the price of products across varying sizes and weights.
+  %span.joyride-nub.bottom
+  

app/assets/javascripts/templates/question_mark_with_tooltip_icon.html.haml

@@ -0,0 +1 @@
+%button.question-mark-icon{"ng-class" => "{open: tt_isOpen}", type: 'button'}