Replace bootstrap popover

Gruntfile.js

@@ -106,6 +106,7 @@ module.exports = function(grunt) {
                   "editor/js/ui/menu.js",
                   "editor/js/ui/keyboard.js",
                   "editor/js/ui/tabs.js",
+                  "editor/js/ui/popover.js",
                   "editor/js/ui/workspaces.js",
                   "editor/js/ui/view.js",
                   "editor/js/ui/sidebar.js",

editor/js/ui/menu.js

@@ -133,17 +133,6 @@ RED.menu = (function() {
             if (opt.disabled) {
                 item.addClass("disabled");
             }
-            if (opt.tip) {
-                item.popover({
-                    placement:"left",
-                    trigger: "hover",
-                    delay: { show: 350, hide: 20 },
-                    html: true,
-                    container:'body',
-                    content: opt.tip
-                });
-            }
-
         }
 
 

editor/js/ui/palette.js

@@ -115,7 +115,7 @@ RED.palette = (function() {
         }
 
 
-        el.data('popover').options.content = popOverContent;
+        el.data('popover').setContent(popOverContent);
     }
 
     function escapeNodeType(nt) {
@@ -188,18 +188,24 @@ RED.palette = (function() {
             $("#palette-"+category).append(d);
             d.onmousedown = function(e) { e.preventDefault(); };
 
-            $(d).popover({
+            RED.popover.create({
-                title:d.type,
+                target:$(d),
-                placement:"right",
+                content: "hi",
-                trigger: "hover",
+                delay: { show: 750, hide: 50 }
-                delay: { show: 750, hide: 50 },
-                html: true,
-                container:'body'
             });
+
+            // $(d).popover({
+            //     title:d.type,
+            //     placement:"right",
+            //     trigger: "hover",
+            //     delay: { show: 750, hide: 50 },
+            //     html: true,
+            //     container:'body'
+            // });
             $(d).click(function() {
                 RED.view.focus();
                 var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
-                $("#tab-info").html(help);
+                RED.sidebar.info.set(help);
             });
             $(d).draggable({
                 helper: 'clone',

editor/js/ui/popover.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright 2015 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+RED.popover = (function() {
+
+
+    function createPopover(options) {
+        var target = options.target;
+
+        var content = options.content;
+        var delay = options.delay;
+        var timer = null;
+        var active;
+        var div;
+
+        var openPopup = function() {
+            if (active) {
+                div = $('<div class="red-ui-popover"></div>').html(content).appendTo("body");
+                var targetPos = target.offset();
+                var targetWidth = target.width();
+                var targetHeight = target.height();
+
+                var divHeight = div.height();
+                div.css({top: targetPos.top+targetHeight/2-divHeight/2-10,left:targetPos.left+targetWidth+17});
+
+                div.fadeIn("fast");
+            }
+        }
+        var closePopup = function() {
+            if (!active) {
+                if (div) {
+                    div.fadeOut("fast",function() {
+                        $(this).remove();
+                    });
+                    div = null;
+                }
+            }
+        }
+
+        target.on('mouseenter',function(e) {
+            clearTimeout(timer);
+            active = true;
+            timer = setTimeout(openPopup,delay.show);
+        });
+        target.on('mouseleave', function(e) {
+            if (timer) {
+                clearTimeout(timer);
+            }
+            active = false;
+            setTimeout(closePopup,delay.hide);
+        });
+        var res = {
+            setContent: function(_content) {
+                content = _content;
+            }
+        }
+        target.data('popover',res);
+        return res;
+
+    }
+
+    return {
+        create: createPopover
+    }
+
+})();

editor/js/ui/tab-info.js

@@ -167,9 +167,13 @@ RED.sidebar.info = (function() {
     }
 
     function clear() {
-        $("#tab-info").html("");
+        $(content).html("");
     }
 
+    function set(html) {
+        $(content).html(html);
+    }
+    
     RED.events.on("view:selection-changed",function(selection) {
         if (selection.nodes) {
             if (selection.nodes.length == 1) {
@@ -194,6 +198,7 @@ RED.sidebar.info = (function() {
         init: init,
         show: show,
         refresh:refresh,
-        clear: clear
+        clear: clear,
+        set: set
     }
 })();

editor/js/ui/tabs.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013 IBM Corp.
+ * Copyright 2013, 2015 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

editor/sass/jquery.scss

@@ -27,10 +27,9 @@
 
 .ui-dialog {
     border-radius: 1px;
-    border: 1px solid #eee;
     background: #fff;
     padding: 0;
-    box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
+    @include component-shadow;
 }
 .ui-dialog .ui-dialog-content {
     padding: 25px 25px 10px 25px;

editor/sass/mixins.scss

@@ -76,3 +76,9 @@
     width: 18px;
     height: 18px;
 }
+
+@mixin component-shadow {
+    border: 1px solid $secondary-border-color;
+    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+
+}

editor/sass/popover.scss

@@ -0,0 +1,53 @@
+/**
+ * Copyright 2015 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+
+
+ .red-ui-popover {
+     display: none;
+     position: absolute;
+     width: 300px;
+     padding: 10px;
+     height: auto;
+     background: #fff;
+     
+     z-index: 1000;
+     font-size: 14px;
+     line-height: 1.4em;
+     @include component-shadow;
+ }
+ .red-ui-popover:after, .red-ui-popover:before {
+ 	right: 100%;
+ 	top: 50%;
+ 	border: solid transparent;
+ 	content: " ";
+ 	height: 0;
+ 	width: 0;
+ 	position: absolute;
+ 	pointer-events: none;
+ }
+
+ .red-ui-popover:after {
+ 	border-color: rgba(136, 183, 213, 0);
+ 	border-right-color: #fff;
+ 	border-width: 10px;
+ 	margin-top: -10px;
+ }
+ .red-ui-popover:before {
+ 	border-color: rgba(194, 225, 245, 0);
+ 	border-right-color: $primary-border-color;
+ 	border-width: 11px;
+ 	margin-top: -11px;
+ }

editor/sass/style.scss

@@ -38,7 +38,7 @@
 @import "tabs";
 @import "tab-config";
 @import "tab-info";
-
+@import "popover";
 @import "flow";
 
 @import "dragdrop";