feat: use visibility instead of display for tooltip (#647)

floating-ui · Jul 1, 2018 · fec3de1 · fec3de1
1 parent 94ba69b
commit fec3de1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/tooltip/src/index.js b/packages/tooltip/src/index.js
@@ -190,7 +190,7 @@ export default class Tooltip {
 
     // if the tooltipNode already exists, just show it
     if (this._tooltipNode) {
-      this._tooltipNode.style.display = '';
+      this._tooltipNode.style.visibility = 'visible';
       this._tooltipNode.setAttribute('aria-hidden', 'false');
       this.popperInstance.update();
       return this;
@@ -261,7 +261,7 @@ export default class Tooltip {
     this._isOpen = false;
 
     // hide tooltipNode
-    this._tooltipNode.style.display = 'none';
+    this._tooltipNode.style.visibility = 'hidden';
     this._tooltipNode.setAttribute('aria-hidden', 'true');
 
     return this;

diff --git a/packages/tooltip/tests/functional/tooltip.js b/packages/tooltip/tests/functional/tooltip.js
@@ -45,7 +45,7 @@ describe('[tooltip.js]', () => {
       then(() => instance.hide());
 
       then(() => {
-        expect(document.querySelector('.tooltip').style.display).toBe('none');
+        expect(document.querySelector('.tooltip').style.visibility).toBe('hidden');
         done();
       });
     });
@@ -72,7 +72,7 @@ describe('[tooltip.js]', () => {
       then(() => instance.toggle());
 
       then(() => {
-        expect(document.querySelector('.tooltip').style.display).toBe('none');
+        expect(document.querySelector('.tooltip').style.visibility).toBe('hidden');
         done();
       });
     });
@@ -390,7 +390,7 @@ describe('[tooltip.js]', () => {
       reference.dispatchEvent(new CustomEvent('mouseenter'));
       then(() => reference.dispatchEvent(new CustomEvent('mouseleave')), 200);
       then(() => {
-        expect(document.querySelector('.tooltip').style.display).toBe('none');
+        expect(document.querySelector('.tooltip').style.visibility).toBe('hidden');
         done();
       }, 200);
     });
@@ -416,7 +416,7 @@ describe('[tooltip.js]', () => {
           .dispatchEvent(new CustomEvent('mouseleave'))
       );
       then(() => {
-        expect(document.querySelector('.tooltip').style.display).toBe('none');
+        expect(document.querySelector('.tooltip').style.visibility).toBe('hidden');
         done();
       }, 200);
     });
@@ -443,7 +443,7 @@ describe('[tooltip.js]', () => {
       );
       then(() => reference.dispatchEvent(new CustomEvent('mouseenter')));
       then(() => {
-        expect(document.querySelector('.tooltip').style.display).toBe('');
+        expect(document.querySelector('.tooltip').style.visibility).toBe('visible');
         done();
       }, 200);
     });
@@ -493,7 +493,7 @@ describe('[tooltip.js]', () => {
       reference.dispatchEvent(new CustomEvent('click'));
       then(() => reference.dispatchEvent(new CustomEvent('click')));
       then(() => {
-        expect(document.querySelector('.tooltip').style.display).toBe('none');
+        expect(document.querySelector('.tooltip').style.visibility).toBe('hidden');
         done();
       });
     });