feat(SW-892) Show toolTip on button hover

components/HotelReservation/SelectRate/RoomFilter/index.tsx

@@ -98,26 +98,38 @@ export default function RoomFilter({
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit(submitFilter)}>
           <div className={styles.roomsFilter}>
-            {filterOptions.map((option) => (
-              <CheckboxChip
-                name={option.code}
-                key={option.code}
-                label={intl.formatMessage({ id: option.description })}
-                disabled={
-                  (option.code === RoomPackageCodeEnum.ALLERGY_ROOM &&
-                    petFriendly) ||
-                  (option.code === RoomPackageCodeEnum.PET_ROOM &&
-                    allergyFriendly)
-                }
-                selected={getValues(option.code)}
-                Icon={getIconForFeatureCode(option.code)}
-                tooltipText={
-                  option.code === RoomPackageCodeEnum.PET_ROOM
-                    ? tooltipText
-                    : undefined
-                }
-              />
-            ))}
+            {filterOptions.map((option) => {
+              const { code, description } = option
+              const isPetRoom = code === RoomPackageCodeEnum.PET_ROOM
+              const isAllergyRoom = code === RoomPackageCodeEnum.ALLERGY_ROOM
+              const isDisabled =
+                (isAllergyRoom && petFriendly) || (isPetRoom && allergyFriendly)
+
+              const checkboxChip = (
+                <CheckboxChip
+                  name={code}
+                  key={code}
+                  label={intl.formatMessage({ id: description })}
+                  disabled={isDisabled}
+                  selected={getValues(code)}
+                  Icon={getIconForFeatureCode(code)}
+                  hasTooltip={isPetRoom}
+                />
+              )
+
+              return isPetRoom ? (
+                <Tooltip
+                  key={option.code}
+                  text={tooltipText}
+                  position="bottom"
+                  arrow="right"
+                >
+                  {checkboxChip}
+                </Tooltip>
+              ) : (
+                checkboxChip
+              )
+            })}
           </div>
         </form>
       </FormProvider>

components/TempDesignSystem/Form/FilterChip/_Chip/index.tsx

@@ -3,7 +3,6 @@ import { useFormContext } from "react-hook-form"
 
 import { HeartIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
-import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
 
 import styles from "./chip.module.css"
 
@@ -20,7 +19,7 @@ export default function FilterChip({
   value,
   selected,
   disabled,
-  tooltipText,
+  hasTooltip,
 }: FilterChipProps) {
   const { register } = useFormContext()
 
@@ -45,11 +44,11 @@ export default function FilterChip({
       <Caption type="bold" color={color} className={styles.caption}>
         {label}
       </Caption>
-      {tooltipText && (
-        <Tooltip text={tooltipText} position="bottom" arrow="right">
-          <InfoCircleIcon color={color} height={iconHeight} width={iconWidth} />
-        </Tooltip>
+
+      {hasTooltip && (
+        <InfoCircleIcon color={color} height={iconHeight} width={iconWidth} />
       )}
+
       <input
         aria-hidden
         id={id || name}

types/components/form/filterChip.ts

@@ -11,7 +11,7 @@ export interface FilterChipProps {
   value?: string
   selected?: boolean
   disabled?: boolean
-  tooltipText: string | undefined
+  hasTooltip?: boolean
 }
 
 export type FilterChipCheckboxProps = Omit<FilterChipProps, "type">