Merge pull request #972 from jhawthorn/bootstrap_tooltips

Replace powerTip with bootstrap tooltips

backend/app/assets/javascripts/spree/backend.js

@@ -1,11 +1,11 @@
+//= require solidus_admin/bind-polyfill
 //= require handlebars
 //= require jquery
 //= require jquery_ujs
 //= require jquery-ui/datepicker
 //= require jquery-ui/sortable
 //= require jquery-ui/autocomplete
 //= require jquery.cookie
-//= require jquery.powertip
 //= require jquery.sticky-kit.min
 //= require underscore-min
 //= require backbone

backend/app/assets/javascripts/spree/backend/admin.js

@@ -15,36 +15,27 @@ Hopefully, this will evolve into a propper class.
 **/
 
 jQuery(function($) {
+  $('body').tooltip({selector: '.with-tip'})
 
-  // Add some tips
-  $('.with-tip').powerTip({
-    smartPlacement: true,
-    fadeInTime: 50,
-    fadeOutTime: 50,
+  $('body').on('inserted.bs.tooltip', function(e){
+    var $target = $(e.target);
+    var $tooltip = $("#" + $target.attr("aria-describedby"));
+    $tooltip.addClass("action-" + $target.data("action"));
   });
 
-  $('body')
-    .on('powerTipPreRender', '.with-tip', function() {
-      $('#powerTip').addClass($(this).data('action'));
-      $('#powerTip').addClass($(this).data('tip-color'));
-    })
-    .on('powerTipClose', '.with-tip', function() {
-      $('#powerTip').removeClass($(this).data('action'));
-    })
-
   // Highlight hovered table column
-  $('table tbody tr td.actions').find('a, button').hover(function(){
+  $('table').on("mouseenter", 'td.actions a, td.actions button', function(){
     var tr = $(this).closest('tr');
     var klass = 'highlight action-' + $(this).data('action')
     tr.addClass(klass)
     tr.prev().addClass('before-' + klass);
-  }, function(){
+  });
+  $('table').on("mouseleave", 'td.actions a, td.actions button', function(){
     var tr = $(this).closest('tr');
     var klass = 'highlight action-' + $(this).data('action')
     tr.removeClass(klass)
     tr.prev().removeClass('before-' + klass);
   });
-
 });
 
 

backend/app/assets/javascripts/spree/backend/line_items_on_order_edit.js

@@ -13,15 +13,6 @@ $(document).ready(function () {
         $('#stock_details').show();
 
         $('button.add_variant').click(addVariant);
-
-        // Add some tips
-        $('.with-tip').powerTip({
-            smartPlacement: true,
-            fadeInTime: 50,
-            fadeOutTime: 50,
-            intentPollInterval: 300
-        });
-
     });
 });
 

backend/app/assets/javascripts/spree/backend/payments/edit.js.coffee

@@ -61,10 +61,6 @@ jQuery ($) ->
             $(@).data('clicked', true)
           mouseup: =>
             @[action]()
-        .powerTip
-          smartPlacement: true
-          fadeInTime:     50
-          fadeOutTime:    50
 
     $buttons: ->
       @$actions().find(".fa-#{@action}, .fa-cancel")

backend/app/assets/javascripts/spree/backend/shipments.js

@@ -13,15 +13,6 @@ $(document).ready(function () {
     $('#stock_details').show();
 
     $('button.add_variant').click(addVariantFromStockLocation);
-
-    // Add some tips
-    $('.with-tip').powerTip({
-      smartPlacement: true,
-      fadeInTime: 50,
-      fadeOutTime: 50,
-      intentPollInterval: 300
-    });
-
   });
 
   //handle edit click
@@ -237,13 +228,6 @@ startItemSplit = function(event){
   $('a.cancel-split').click(cancelItemSplit);
   $('a.save-split').click(completeItemSplit);
 
-  // Add some tips
-  $('.with-tip').powerTip({
-    smartPlacement: true,
-    fadeInTime: 50,
-    fadeOutTime: 50,
-    intentPollInterval: 300
-  });
   $('#item_stock_location').select2({ width: 'resolve', placeholder: Spree.translations.item_stock_placeholder });
 }
 

backend/app/assets/javascripts/spree/backend/spree-select2.js

@@ -11,14 +11,4 @@ jQuery(function($) {
     new_taxon = taxon.text.replace('->', '<i class="fa fa-arrow-right">')
     return new_taxon;
   }
-
-  $("#product_taxon_ids").on({
-    change: function(e){
-      $('.select2-search-choice .with-tip').powerTip({
-        smartPlacement: true,
-        fadeInTime: 50,
-        fadeOutTime: 50
-      })
-    }
-  })
 })

backend/app/assets/stylesheets/spree/backend.css

@@ -6,7 +6,6 @@
  *= require normalize
  *= require jquery-ui/datepicker
  *= require jquery-ui/autocomplete
- *= require jquery.powertip
  *= require select2
  *= require prism
 

backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss

@@ -142,7 +142,7 @@ $grid-gutter-width:          1.875rem !default; // 30px
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif:     "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-sans-serif:     $base-font-family !default;
 $font-family-serif:          Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:      Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:           $font-family-sans-serif !default;

backend/app/assets/stylesheets/spree/backend/plugins/_bootstrap_tooltip.scss

@@ -0,0 +1,47 @@
+@mixin bootstrap-tooltip-color($color) {
+  .tooltip-inner{
+    background-color: $color;
+  }
+
+  &.tooltip-top,
+  &.bs-tether-element-attached-bottom {
+    .tooltip-arrow {
+      border-top-color: $color;
+    }
+  }
+
+  &.tooltip-right,
+  &.bs-tether-element-attached-left {
+    .tooltip-arrow {
+      border-right-color: $color;
+    }
+  }
+
+  &.tooltip-bottom,
+  &.bs-tether-element-attached-top {
+    .tooltip-arrow {
+      border-bottom-color: $color;
+    }
+  }
+
+  &.tooltip-left,
+  &.bs-tether-element-attached-right {
+    .tooltip-arrow {
+      border-left-color: $color;
+    }
+  }
+}
+
+.tooltip {
+  pointer-events: none;
+
+  &.action-edit, &.action-save, &.action-capture, &.action-add {
+    @include bootstrap-tooltip-color($brand-success);
+  }
+  &.action-clone {
+    @include bootstrap-tooltip-color($brand-warning);
+  }
+  &.action-void, &.action-failure, &.action-cancel, &.action-remove {
+    @include bootstrap-tooltip-color($brand-danger);
+  }
+}

backend/app/assets/stylesheets/spree/backend/spree_admin.scss

@@ -30,8 +30,8 @@
 @import 'spree/backend/components/tabs';
 
 @import 'font-awesome';
-@import 'spree/backend/plugins/powertip';
 @import 'spree/backend/plugins/select2';
+@import 'spree/backend/plugins/bootstrap_tooltip';
 
 @import 'spree/backend/sections/adjustments_table';
 @import 'spree/backend/sections/orders';

backend/app/views/spree/admin/style_guide/topics/messaging/_tooltips.html.erb

@@ -3,7 +3,7 @@
 <%- end %>
 
 <p>
-  We are using <a href="http://stevenbenner.github.io/jquery-powertip/">jQuery PowerTip</a>
+  We are using bootstrap's tooltip library
   with the class <code>.with-tip</code> as a trigger.
 </p>