fix(whisper): fix overlay jittering when the cursor is hovered (#1459)

rsuite · Jan 22, 2021 · d29e785 · d29e785
1 parent fe46e4d
commit d29e785
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/Popover/styles/common.less b/src/Popover/styles/common.less
@@ -66,7 +66,7 @@
 
 // Common style for .placement-top*
 .@{ns}popover[class*='placement-top'] {
-  margin-top: -@popover-arrow-width;
+  margin-top: -(@popover-arrow-width + 2px);
   .set-translate-transition(0, -@popover-translate-distance);
 
   > .@{ns}popover-arrow {
@@ -86,7 +86,7 @@
 /* rtl:begin:ignore */
 // Common style for .placement-right*
 .@{ns}popover[class*='placement-right'] {
-  margin-left: @popover-arrow-width;
+  margin-left: (@popover-arrow-width + 2px);
   .set-translate-transition(@popover-translate-distance, 0);
 
   > .@{ns}popover-arrow {
@@ -105,7 +105,7 @@
 
 // Common style for .placement-left*
 .@{ns}popover[class*='placement-left'] {
-  margin-left: -@popover-arrow-width;
+  margin-left: -(@popover-arrow-width + 2px);
   .set-translate-transition(-@popover-translate-distance, 0);
 
   > .@{ns}popover-arrow {
@@ -126,7 +126,7 @@
 
 // Common style for .placement-bottom*
 .@{ns}popover[class*='placement-bottom'] {
-  margin-top: @popover-arrow-width;
+  margin-top: (@popover-arrow-width + 2px);
   .set-translate-transition(0, @popover-translate-distance);
 
   > .@{ns}popover-arrow {

diff --git a/src/Popover/test/PopoverStylesSpec.js b/src/Popover/test/PopoverStylesSpec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Popover from '../index';
-import { createTestContainer, getDOMNode, getStyle, toRGB } from '@test/testUtils';
+import { createTestContainer, getStyle, toRGB } from '@test/testUtils';
 
 import '../styles/index';
 import Whisper from '../../Whisper/index';
@@ -38,7 +38,7 @@ describe('Popover styles', () => {
       createTestContainer()
     );
     const dom = document.querySelector('.popover-top-start');
-    assert.equal(getStyle(dom, 'marginTop'), '-6px', 'Popover margin value');
+    assert.equal(getStyle(dom, 'marginTop'), '-8px', 'Popover margin value');
     const arrowDom = dom.querySelector('.rs-popover-arrow');
     assert.equal(getStyle(arrowDom, 'bottom'), '-6px', 'Popover arrow bottom value');
     assert.equal(getStyle(arrowDom, 'marginLeft'), '-6px', 'Popover arrow bottom value');

diff --git a/src/Tooltip/styles/common.less b/src/Tooltip/styles/common.less
@@ -45,7 +45,7 @@
 
 // Common style for .placement-top*
 .@{ns}tooltip[class*='placement-top'] {
-  margin-top: -@tooltip-arrow-width;
+  margin-top: -(@tooltip-arrow-width + 2px);
   .set-translate-transition(0, -@tooltip-translate-distance);
 
   .@{ns}tooltip-arrow {
@@ -61,7 +61,7 @@
 
 // Common style for .placement-bottom*
 .@{ns}tooltip[class*='placement-bottom'] {
-  margin-top: @tooltip-arrow-width;
+  margin-top: (@tooltip-arrow-width + 2px);
   .set-translate-transition(0, @tooltip-translate-distance);
 
   .@{ns}tooltip-arrow {
@@ -78,7 +78,7 @@
 /* rtl:begin:ignore */
 // Common style for .placement-right*
 .@{ns}tooltip[class*='placement-right'] {
-  margin-left: @tooltip-arrow-width;
+  margin-left: (@tooltip-arrow-width + 2px);
   .set-translate-transition(@tooltip-translate-distance, 0);
 
   .@{ns}tooltip-arrow {
@@ -94,7 +94,7 @@
 
 // Common style for .placement-lef*
 .@{ns}tooltip[class*='placement-left'] {
-  margin-left: -@tooltip-arrow-width;
+  margin-left: -(@tooltip-arrow-width + 2px);
   .set-translate-transition(-@tooltip-translate-distance, 0);
 
   .@{ns}tooltip-arrow {