Fix tooltip position when page is scrolled.
authorAlexandre Segura <mex.zktk@gmail.com>
Thu, 02 Mar 2017 16:59:01 +0100
changeset 415 c4b700679964
parent 414 49a753808505
child 416 5daa15b87404
Fix tooltip position when page is scrolled.
src_js/iconolab-bundle/package.json
src_js/iconolab-bundle/src/components/editor/mixins/tooltip.js
--- a/src_js/iconolab-bundle/package.json	Wed Mar 01 18:50:40 2017 +0100
+++ b/src_js/iconolab-bundle/package.json	Thu Mar 02 16:59:01 2017 +0100
@@ -10,7 +10,7 @@
     "standalone": "webpack-dev-server --content-base src_js/iconolab-bundle/"
   },
   "dependencies": {
-    "bootstrap": "^3.3.6",
+    "bootstrap": "^3.3.7",
     "bootstrap-sass": "^3.3.7",
     "diff": "^3.0.0",
     "event-emitter": "^0.3.4",
--- a/src_js/iconolab-bundle/src/components/editor/mixins/tooltip.js	Wed Mar 01 18:50:40 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/mixins/tooltip.js	Thu Mar 02 16:59:01 2017 +0100
@@ -7,7 +7,6 @@
     trigger: 'manual',
     html: true,
     title: '',
-    viewport: '.cut-canvas',
     content: '',
 }
 
@@ -37,9 +36,8 @@
             var target = new Snap(this.getTooltipTarget());
 
             var $el = $(target.node);
-            $el
-                .popover(popoverOptions)
-                .popover('show');
+
+            $el.popover(popoverOptions);
 
             this.$on('drag:start', function() {
                 $el.popover('hide');
@@ -49,9 +47,16 @@
             });
 
             $el.on('shown.bs.popover', (e) => {
-                var $tip = $el.data('bs.popover').$tip;
+                var $tip = $el.data('bs.popover').tip();
                 $tip.find('input[name="title"]').focus();
+                // Fixes tooltip positioning when page is scrolled
+                // See https://github.com/twbs/bootstrap/issues/21855
+                if (document.body.scrollTop > 0) {
+                    $tip.css('top', parseInt($tip.css('top'), 10) + document.body.scrollTop);
+                }
             });
+
+            $el.popover('show');
         },
         destroyTooltip: function() {
             var target = new Snap(this.getTooltipTarget());