Replace tooltip component

eoghan2t9 · Jun 18, 2020 · 19c0133 · 19c0133
1 parent 7e7103d
commit 19c0133
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 214 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -27,13 +27,13 @@
         "react-dom": "^16.13.1",
         "react-i18next": "^11.4.0",
         "react-modal": "^3.11.2",
+        "react-popper-tooltip": "^2.11.1",
         "react-redux": "^7.2.0",
         "react-redux-loading-bar": "^4.6.0",
         "react-router-dom": "^5.2.0",
         "react-router-hash-link": "^1.2.2",
         "react-select": "^3.1.0",
         "react-table": "^6.11.4",
-        "react-tooltip": "^4.2.6",
         "react-transition-group": "^4.4.1",
         "redux": "^4.0.5",
         "redux-actions": "^2.6.5",

diff --git a/.../components/Logs/Tooltip/ReactTooltip.css → client/src/components/Logs/Cells/Tooltip.css b/.../components/Logs/Tooltip/ReactTooltip.css → client/src/components/Logs/Cells/Tooltip.css
@@ -1,24 +1,20 @@
-.custom-tooltip {
+.tooltip__container {
     padding: 1rem 1.5rem 1.25rem 1.5rem;
     font-size: 16px !important;
     box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
     border-radius: 4px !important;
     pointer-events: auto !important;
-    /*may cause problems https://github.com/wwayne/react-tooltip/issues/204*/
-    position: absolute !important;
-    top: 4rem !important;
+    background-color: var(--white);
+    z-index: 102;
 }
 
 .white-space--nowrap {
     white-space: nowrap !important;
 }
 
-.white-space--normal {
+.overflow-break {
     white-space: normal !important;
-}
-
-.word-break--break-all {
-    word-break: break-all !important;
+    overflow-wrap: break-word;
 }
 
 .grid {
@@ -70,7 +66,7 @@
         font-weight: bold;
     }
 
-    .custom-tooltip {
+    .tooltip__container  {
         overflow-y: scroll;
     }
 }
@@ -87,14 +83,6 @@
     grid-auto-flow: column;
 }
 
-.custom-tooltip.show {
-    opacity: 1 !important;
-}
-
-.custom-tooltip:hover {
-    opacity: 1 !important;
-}
-
 .grid-content > * {
     justify-content: space-between !important;
     width: 100% !important;

diff --git a/client/src/components/Logs/Cells/getClientCell.js b/client/src/components/Logs/Cells/getClientCell.js
@@ -75,12 +75,11 @@ const getClientCell = ({
                 className: hintClass,
                 columnClass: 'grid grid--limited',
                 tooltipClass: 'px-5 pb-5 pt-4 mw-75',
-                dataTip: true,
                 xlinkHref: 'question',
                 contentItemClass: 'text-truncate key-colon',
                 title: 'client_details',
                 content: processedData,
-                place: 'bottom',
+                placement: 'bottom',
             })}
             <div
                 className={nameClass}>

diff --git a/client/src/components/Logs/Cells/getDomainCell.js b/client/src/components/Logs/Cells/getDomainCell.js
@@ -37,11 +37,11 @@ const getDomainCell = (props) => {
     const dnssecHint = getHintElement({
         className: lockIconClass,
         tooltipClass: 'py-4 px-5 pb-45',
-        dataTip: answer_dnssec,
+        canShowTooltip: answer_dnssec,
         xlinkHref: 'lock',
         columnClass: 'w-100',
         content: 'validated_with_dnssec',
-        place: 'bottom',
+        placement: 'bottom',
     });
 
     const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
@@ -64,7 +64,7 @@ const getDomainCell = (props) => {
     const renderGrid = (content, idx) => {
         const preparedContent = typeof content === 'string' ? t(content) : content;
         const className = classNames('text-truncate key-colon o-hidden', {
-            'word-break--break-all white-space--normal': preparedContent.length > 100,
+            'overflow-break': preparedContent.length > 100,
         });
         return <div key={idx} className={className}>{preparedContent}</div>;
     };
@@ -81,7 +81,6 @@ const getDomainCell = (props) => {
     const trackerHint = getHintElement({
         className: privacyIconClass,
         tooltipClass: 'pt-4 pb-5 px-5 mw-75',
-        dataTip: true,
         xlinkHref: 'privacy',
         contentItemClass: 'key-colon',
         renderContent,