Replace Tipsy by Bootstrap's tooltips

app/assets/javascripts/peek.js

-import 'vendor/jquery.tipsy';
 import 'vendor/peek';
 import 'vendor/peek.performance_bar';
 import 'vendor/peek.rblineprof';

vendor/assets/javascripts/peek.js

@@ -3,7 +3,7 @@ var requestId;
 requestId = null;
 
 (function($) {
-  var fetchRequestResults, getRequestId, initializeTipsy, peekEnabled, toggleBar, updatePerformanceBar;
+  var fetchRequestResults, getRequestId, peekEnabled, toggleBar, updatePerformanceBar;
   getRequestId = function() {
     if (requestId != null) {
       return requestId;
@@ -42,16 +42,6 @@ requestId = null;
     }
     return $(document).trigger('peek:render', [getRequestId(), results]);
   };
-  initializeTipsy = function() {
-    return $('#peek .peek-tooltip, #peek .tooltip').each(function() {
-      var el, gravity;
-      el = $(this);
-      gravity = el.hasClass('rightwards') || el.hasClass('leftwards') ? $.fn.tipsy.autoWE : $.fn.tipsy.autoNS;
-      return el.tipsy({
-        gravity: gravity
-      });
-    });
-  };
   toggleBar = function(event) {
     var wrapper;
     if ($(event.target).is(':input')) {
@@ -80,7 +70,6 @@ requestId = null;
     });
   };
   $(document).on('keypress', toggleBar);
-  $(document).on('peek:update', initializeTipsy);
   $(document).on('peek:update', fetchRequestResults);
   $(document).on('pjax:end', function(event, xhr, options) {
     if (xhr != null) {

vendor/assets/javascripts/peek.performance_bar.js

@@ -85,17 +85,15 @@ PerformanceBar = (function() {
     width = this.mapH(time);
     title = name + ": " + (PerformanceBar.formatTime(time));
     bar = $('<li></li>', {
-      title: title,
-      "class": 'peek-tooltip'
+      'data-title': title,
+      'data-toggle': 'tooltip',
+      'data-container': 'body'
     });
     bar.css({
       width: width + "px",
       left: left + "px",
       background: color
     });
-    bar.tipsy({
-      gravity: $.fn.tipsy.autoNS
-    });
     return this.el.append(bar);
   };
 
@@ -114,12 +112,10 @@ renderPerformanceBar = function() {
   bar = new PerformanceBar;
   bar.render(time);
   span = $('<span>', {
-    'class': 'peek-tooltip',
-    title: 'Total navigation time for this page.'
+    'data-toggle': 'tooltip',
+    'data-title': 'Total navigation time for this page.',
+    'data-container': 'body'
   }).text(PerformanceBar.formatTime(bar.total()));
-  span.tipsy({
-    gravity: $.fn.tipsy.autoNS
-  });
   return updateStatus(span);
 };
 
@@ -168,12 +164,10 @@ $(document).on('pjax:end page:load turbolinks:load', function(event, xhr) {
       tech = 'Turbolinks';
     }
     span = $('<span>', {
-      'class': 'peek-tooltip',
-      title: tech + " navigation time"
+      'data-toggle': 'tooltip',
+      'data-title': tech + " navigation time",
+      'data-container': 'body'
     }).text(PerformanceBar.formatTime(total));
-    span.tipsy({
-      gravity: $.fn.tipsy.autoNS
-    });
     updateStatus(span);
     return ajaxStart = null;
   }, 0);
@@ -186,6 +180,3 @@ $(function() {
     return $('#peek-view-performance-bar').remove();
   }
 });
-
-// ---
-// generated by coffee-script 1.9.2

vendor/assets/stylesheets/peek.scss

@@ -86,29 +86,5 @@
 }
 
 #modal-peek-pg-queries-content {
-  // background: #999;
   color: #000;
 }
-
-.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
-  .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
-
-  /* Rounded corners */
-  .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
-
-  .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
-
-  /* Rules to colour arrows */
-  .tipsy-arrow-n { border-bottom-color: #000; }
-  .tipsy-arrow-s { border-top-color: #000; }
-  .tipsy-arrow-e { border-left-color: #000; }
-  .tipsy-arrow-w { border-right-color: #000; }
-
-  .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
-    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
-    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
-  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
-    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
-    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
-  .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
-  .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }