feat: info tooltip

src/components/helpers/tooltip/infoTooltip.jsx

@@ -1,43 +1,39 @@
 import { useState } from 'react';
 import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
+import { MdClose, MdInfo, MdOpenInNew } from 'react-icons/md';
 import './tooltip.scss';
+import Tooltip from './/Tooltip';
 
-export default function InfoTooltip({
-  children,
-  title,
-  style,
-  placement,
-  subtitle,
-  linkText,
-  linkURL,
-}) {
-  const [showTooltip, setShowTooltip] = useState(true);
+export default function InfoTooltip({ children, title, style, placement, subtitle }) {
+  const [showTooltip, setShowTooltip] = useState(false);
   const { x, y, reference, floating, strategy } = useFloating({
-    placement: placement || 'bottom-end',
-    middleware: [flip(), offset(15), shift()],
+    placement: placement || 'top-start',
+    middleware: [flip(), offset(10), shift()],
   });
 
   return (
-    <div className="tooltip" style={style} ref={reference}>
-      {children}
+    <div className="infoTooltip" style={style} ref={reference}>
+      <MdInfo onClick={() => setShowTooltip(true)} />
       {showTooltip && (
         <div
-          className="notification"
           ref={floating}
           style={{
             position: strategy,
             top: y ?? '',
             left: x ?? '',
           }}
+          className="infoTooltipTitle"
         >
-          <span className="title">{title}</span>
-          <span className="subtitle">
-            {subtitle}{' '}
-            <a className="link" href={linkURL}>
-              {linkText}
-            </a>
-          </span>
-          <button onClick={() => setShowTooltip(false)}>Ok, Got it!</button>
+          <div className="tooltipHeader">
+            <span className="title">{title}</span>
+            <Tooltip title="Close">
+              <div className="close" onClick={() => setShowTooltip(false)}>
+                <MdClose />
+              </div>
+            </Tooltip>
+          </div>
+          <span className='subtitle'>{subtitle}</span>
+          <span className='link'>Open Knowledgebase <MdOpenInNew /></span>
         </div>
       )}
     </div>

src/components/helpers/tooltip/tooltip.scss

@@ -77,3 +77,53 @@
   height: 8px;
   transform: rotate(45deg);
 }
+
+.infoTooltip {
+  position: relative;
+  display: grid;
+}
+
+.infoTooltipTitle {
+  min-width: 200px;
+  text-align: center;
+  position: absolute;
+  z-index: 1;
+  cursor: initial;
+  user-select: none;
+  opacity: 1;
+  text-align: left;
+  padding: 25px;
+  display: flex;
+  justify-content: center;
+  flex-flow: column;
+  gap: 10px;
+  @include themed() {
+    background-color: t($modal-background);
+    border-radius: t($borderRadius);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);  
+  }
+  .tooltipHeader {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 25px;
+  }
+  .link {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  .close {
+    font-size: 20px;
+    padding: 15px;
+    place-items: center;
+    display: grid;
+    cursor: pointer;
+    &:hover {
+      @include themed() {
+        background: t($modal-sidebar);
+        border-radius: t($borderRadius);
+      }
+    }
+  }
+}