Update items tooltip

src/components/tooltip/tooltip-checklist.module.scss

@@ -0,0 +1,33 @@
+@import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
+
+.tooltipChecklist {
+  list-style-type: none;
+  padding: 4px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  @media (min-width: $md) {
+    padding: 8px 4px;
+  }
+}
+
+.checklistItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+
+  > img {
+    transform: translateY(2px);
+  }
+
+  @media (min-width: $md) {
+    @include font-body-12;
+  }
+}
+
+.checked {
+  color: $color-gray-200;
+}

src/components/tooltip/tooltip-checklist.tsx

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
 import Tooltip from './tooltip';
 import { images } from '../../utils';
-import styles from './tooltip.module.scss';
+import styles from './tooltip-checklist.module.scss';
+import classNames from 'classnames';
 
 interface Props {
   children: ReactElement;
@@ -13,20 +14,24 @@ interface Props {
 
 const TooltipChecklist = ({ children, items }: Props) => {
   const content = (
-    <div className={styles.tooltipChecklist}>
+    <ul className={styles.tooltipChecklist}>
       {items.map((item, i) => (
-        <div key={i} className={styles.tooltipItem}>
+        <li key={i} className={classNames(styles.checklistItem, { [styles.checked]: item.checked })}>
           <img
             src={item.checked ? images.checkboxFilled : images.checkboxEmpty}
             alt={item.checked ? 'checked' : 'unchecked'}
           />
-          <div className={item.checked ? styles.labelChecked : styles.labelUnchecked}>{item.label}</div>
-        </div>
+          <span>{item.label}</span>
+        </li>
       ))}
-    </div>
+    </ul>
   );
 
-  return <Tooltip overlay={content}>{children}</Tooltip>;
+  return (
+    <Tooltip overlay={content} type="items">
+      {children}
+    </Tooltip>
+  );
 };
 
 export default TooltipChecklist;

src/components/tooltip/tooltip.module.scss

@@ -1,11 +1,22 @@
 @import '../../styles/variables.module.scss';
 @import '../../styles/fonts.module.scss';
 
-.tooltip {
+.defaultTooltipType {
+  width: 100%;
   max-width: 200px;
 }
 
+.itemsTooltipType {
+  width: 100%;
+  max-width: 312px;
+
+  @media (min-width: $md) {
+    max-width: 392px;
+  }
+}
+
 .overlayWrapper {
   @include font-body-15;
   color: $color-base-light;
+  padding: 4px 6px;
 }

src/components/tooltip/tooltip.tsx

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import RCTooltip from 'rc-tooltip';
 import { useWindowDimensions } from '../../hooks/use-window-dimensions';
+import classNames from 'classnames';
 import styles from './tooltip.module.scss'; // Additional styles that require access to CSS variables
 
 import 'rc-tooltip/assets/bootstrap_white.css'; // NOTE: This is required for basic tooltip styling
@@ -9,16 +10,16 @@ import './bootstrap_white.css'; // Override basic tooltip styling
 type Props = {
   children: ReactElement;
   overlay: ReactElement | string;
+  type?: 'default' | 'items' | 'full';
 };
 
-const Tooltip = ({ children, overlay }: Props) => {
+const Tooltip = ({ children, overlay, type = 'default' }: Props) => {
   // NOTE: rc-tooltip requires us to override default styles directly using objects
   // https://github.com/react-component/tooltip#props
   const overlayInnerStyle = {
     display: 'flex',
     alignItems: 'center',
     background: '#0C1143',
-    padding: '12px 16px',
   };
 
   const { isMobile } = useWindowDimensions();
@@ -28,7 +29,7 @@ const Tooltip = ({ children, overlay }: Props) => {
     <RCTooltip
       overlay={<div className={styles.overlayWrapper}>{overlay}</div>}
       placement="bottomRight"
-      overlayClassName={styles.tooltip}
+      overlayClassName={classNames([styles[`${type}TooltipType`]])}
       overlayInnerStyle={overlayInnerStyle}
       mouseEnterDelay={0.2}
       align={{ offset: isMobile ? [4, 6] : [18, 6] }}