Position the price breakdown below the button

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

@@ -2,7 +2,7 @@ Darkswarm.directive "priceBreakdown", ($tooltip)->
   # We use the $tooltip service from Angular foundation to give us boilerplate
   # Subsequently we patch the scope, template and restrictions
   tooltip = $tooltip 'priceBreakdown', 'priceBreakdown', 'click'
-  tooltip.scope = 
+  tooltip.scope =
     variant: "="
   tooltip.templateUrl = "price_breakdown_button.html"
   tooltip.replace = true

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

@@ -1,5 +1,5 @@
 .joyride-tip-guide.price_breakdown{"ng-class" => "{ in: tt_isOpen, fade: tt_animation }"}
-  %span.joyride-nub.right
+  %span.joyride-nub.top
   .joyride-content-wrapper
     %ul
       %li

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

@@ -5,7 +5,7 @@
   .small-4.medium-3.large-2.columns.variant-price
     %price-breakdown{"price-breakdown" => "_", variant: "variant",
       "price-breakdown-append-to-body" => "true",
-      "price-breakdown-placement" => "left",
+      "price-breakdown-placement" => "bottom",
       "price-breakdown-animation" => true}
     {{ variant.price_with_fees | localizeCurrency }}
   .medium-2.large-1.columns.total-price

app/assets/stylesheets/darkswarm/_shop-popovers.scss

@@ -5,7 +5,8 @@
 // Foundation overrides
 .joyride-tip-guide.price_breakdown {
   // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
-  margin-left: -8px;
+  margin-left: -7.4rem;
+  margin-top: 0.1rem;
 
   @include box-shadow(0 2px 8px 0 rgba(0, 0, 0, 0.35));
 
@@ -22,12 +23,8 @@
     color: #1f1f1f;
   }
 
-  .joyride-nub.right {
-    top: 38px;
-    border-color: $grey-800 !important;
-    border-top-color: transparent !important;
-    border-right-color: transparent !important;
-    border-bottom-color: transparent !important;
+  .joyride-nub.top {
+    left: 7.4rem;
   }
 
   ul, li {