flip tooltip when at vertical bounds

fixes slab#851
aleksas · Jan 2, 2017 · 8ca2486 · 8ca2486
1 parent e6d7c3d
commit 8ca2486
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 18 deletions.
diff --git a/assets/base.styl b/assets/base.styl
@@ -57,9 +57,12 @@ colorItemsPerRow = 7
 
   .ql-tooltip
     position: absolute
+    transform: translateY(10px)
     a
       cursor: pointer
       text-decoration: none
+  .ql-tooltip.ql-flip
+    transform: translateY(-10px)
 
   .ql-formats
     &:after

diff --git a/assets/bubble/tooltip.styl b/assets/bubble/tooltip.styl
@@ -5,17 +5,20 @@ arrowWidth = 6px
     background-color: backgroundColor
     border-radius: 25px
     color: textColor
-    margin-top: 10px
   .ql-tooltip-arrow
-    border-bottom: arrowWidth solid backgroundColor
     border-left: arrowWidth solid transparent
     border-right: arrowWidth solid transparent
     content: " "
     display: block
     left: 50%
     margin-left: -1 * arrowWidth
     position: absolute
+  .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow
+    border-bottom: arrowWidth solid backgroundColor
     top: -1 * arrowWidth
+  .ql-tooltip.ql-flip .ql-tooltip-arrow
+    border-top: arrowWidth solid backgroundColor
+    bottom: -1 * arrowWidth
 
   .ql-tooltip.ql-editing
     .ql-tooltip-editor

diff --git a/assets/snow/tooltip.styl b/assets/snow/tooltip.styl
@@ -6,7 +6,6 @@ tooltipMargin = 8px
     border: 1px solid borderColor
     box-shadow: 0px 0px 5px shadowColor
     color: textColor
-    margin-top: 10px
     padding: 5px 12px
     white-space: nowrap
     &::before

diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
@@ -521,10 +521,6 @@ body.home .arrow .shaft {
   border-top-color: #f4f5f5;
 }
 
-a.home .ql-snow .ql-tooltip.ql-out-bottom {
-  visibility: visible;
-}
-
 #above-container {
   background-color: #f4f5f5;
   position: relative;
@@ -715,7 +711,6 @@ a.home .ql-snow .ql-tooltip.ql-out-bottom {
 }
 #above-container.demo-active #demo-container .ql-editor {
   overflow-y: auto;
-  padding-bottom: 55px;
 }
 #above-container.demo-active #laptop-container {
   transition: bottom 500ms ease-in-out 0s;

diff --git a/ui/tooltip.js b/ui/tooltip.js
@@ -4,20 +4,12 @@ class Tooltip {
     this.boundsContainer = boundsContainer || document.body;
     this.root = quill.addContainer('ql-tooltip');
     this.root.innerHTML = this.constructor.TEMPLATE;
-    let offset = parseInt(window.getComputedStyle(this.root).marginTop);
     this.quill.root.addEventListener('scroll', () => {
-      this.root.style.marginTop = (-1*this.quill.root.scrollTop) + offset + 'px';
-      this.checkBounds();
+      this.root.style.marginTop = (-1*this.quill.root.scrollTop) + 'px';
     });
     this.hide();
   }
 
-  checkBounds() {
-    this.root.classList.toggle('ql-out-top', this.root.offsetTop <= 0);
-    this.root.classList.remove('ql-out-bottom');
-    this.root.classList.toggle('ql-out-bottom', this.root.offsetTop + this.root.offsetHeight >= this.quill.root.offsetHeight);
-  }
-
   hide() {
     this.root.classList.add('ql-hidden');
   }
@@ -27,6 +19,7 @@ class Tooltip {
     let top = reference.bottom + this.quill.root.scrollTop;
     this.root.style.left = left + 'px';
     this.root.style.top = top + 'px';
+    this.root.classList.remove('ql-flip');
     let containerBounds = this.boundsContainer.getBoundingClientRect();
     let rootBounds = this.root.getBoundingClientRect();
     let shift = 0;
@@ -38,7 +31,12 @@ class Tooltip {
       shift = containerBounds.left - rootBounds.left;
       this.root.style.left = (left + shift) + 'px';
     }
-    this.checkBounds();
+    if (rootBounds.bottom > containerBounds.bottom) {
+      let height = rootBounds.bottom - rootBounds.top;
+      let verticalShift = containerBounds.bottom - rootBounds.bottom - height;
+      this.root.style.top = (top + verticalShift) + 'px';
+      this.root.classList.add('ql-flip');
+    }
     return shift;
   }