feat(SW-892) Show toolTip on button hover

2024-11-14 14:52:30 +01:00
parent 87713d1332
commit 9ec366a500
3 changed files with 38 additions and 27 deletions
@@ -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>