roojs-bootstrap.js

[roojs1] / roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 171ed6b..8eac0fa 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -19785,10 +19785,12 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
             Roo.bootstrap.Popover.register(this);
         }
          
-        
+        this.arrowEl = this.el.select('.arrow',true).first();
         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY); // probably not needed as it's default in BS4
         this.el.enableDisplayMode('block');
         this.el.hide();
+ 
+        
         if (this.over === false && !this.parent()) {
             return; 
         }
@@ -19811,7 +19813,6 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
                 on_el.on(eventOut, this.leave, this);
             }
         }, this);
-        
     },
     
     
@@ -19859,7 +19860,8 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
     },
     /**
      * Show the popover
-     * @param {Roo.Element|string|false} - element to align and point to. (set align to [ pos, offset ])
+     * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ])
+     * @param {string} (left|right|top|bottom) position
      */
     show : function (on_el)
     {
@@ -19916,13 +19918,15 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
         var box = this.el.getBox();
         
         
-        align = align || Roo.bootstrap.Popover.alignment[placement];
-        this.el.addClass(align[2]);
+        this.alignment = align || Roo.bootstrap.Popover.alignment[placement];
+        this.el.addClass(this.alignment[2]);
 
 //        Roo.log(align);
 
         if (on_el) {
-            this.el.alignTo(on_el, align[0],align[1]);
+            this.alignEl = on_el;
+            this.updatePosition();
+             
         } else {
             // this is usually just done by the builder = to show the popoup in the middle of the scren.
             var es = this.el.getSize();
@@ -19938,10 +19942,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
         
         this.el.addClass('in');
         
-        
-        if (this.el.hasClass('fade')) {
-            // fade it?
-        }
+         
         
         this.hoverState = 'in';
         
@@ -19952,12 +19953,29 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
             this.maskEl.addClass('show');
         }
         this.el.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
-
+ 
+        this.fireEvent('show', this);
         
+    },
+    /**
+     * fire this manually after loading a grid in the table for example
+     *
+     */
+    updatePosition : function()
+    {
+        if (!this.alignEl || !this.alignment) {
+            return;
+        }
+        this.el.alignTo(this.alignEl , this.alignment[0],this.alignment[1]);
         
-        this.fireEvent('show', this);
+        // work out the pointy position.
+        var p1 = this.alignment[0].split('-').pop().replace('?','');
+        var xy = this.alignEl.getAnchorXY(p1, false);
+        xy[0]+=2;xy[1]+=5;
+        this.arrowEl.setXY(xy);
         
     },
+    
     hide : function()
     {
         this.el.setXY([0,0]);