Add elementInvisible to Tooltip

mathieux51 · May 1, 2020 · 92d7d32 · 92d7d32
1 parent 1998fbf
commit 92d7d32
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/Tooltip.js b/src/components/Tooltip.js
@@ -1,5 +1,6 @@
 import React from "react"
 import styled from "styled-components"
+import elementInvisible from "../style/elementInvisible"
 
 const Right = styled.span`
   width: 70vw;
@@ -24,8 +25,7 @@ const Container = styled.div`
   position: relative;
   text-align: left;
   & ${Right} {
-    visibility: ${(props) => (props.isVisible ? "visible" : "hidden")};
-    opacity: ${(props) => (props.isVisible ? 1 : 0)};
+    ${(props) => (props.isVisible ? "" : elementInvisible)};
   }
 `
 

diff --git a/src/style/elementInvisible.js b/src/style/elementInvisible.js
@@ -0,0 +1,12 @@
+import { css } from "styled-components"
+
+const elementInvisible = css`
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+`
+
+export default elementInvisible