feat(core): add tooltips to PropertyItem (#8564)

close AF-1512

packages/frontend/core/src/components/doc-properties/manager/index.tsx

@@ -2,6 +2,7 @@ import {
   DropIndicator,
   IconButton,
   Menu,
+  Tooltip,
   useDraggable,
   useDropTarget,
 } from '@affine/component';
@@ -98,44 +99,46 @@ const PropertyItem = ({
   );
 
   return (
-    <div
-      className={styles.itemContainer}
-      ref={elem => {
-        dropTargetRef.current = elem;
-        dragRef.current = elem;
-      }}
-      onClick={handleClick}
-      data-testid="doc-property-manager-item"
-    >
-      <DocPropertyIcon
-        className={styles.itemIcon}
-        propertyInfo={propertyInfo}
-      />
-      <span className={styles.itemName}>
-        {propertyInfo.name ||
-          (typeInfo?.name ? t.t(typeInfo.name) : t['unnamed']())}
-      </span>
-      <span className={styles.itemVisibility}>
-        {propertyInfo.show === 'hide-when-empty'
-          ? t['com.affine.page-properties.property.hide-when-empty']()
-          : propertyInfo.show === 'always-hide'
-            ? t['com.affine.page-properties.property.always-hide']()
-            : t['com.affine.page-properties.property.always-show']()}
-      </span>
-      <Menu
-        rootOptions={{
-          open: moreMenuOpen,
-          onOpenChange: setMoreMenuOpen,
-          modal: true,
+    <Tooltip content={t.t(typeInfo?.description || propertyInfo.type)}>
+      <div
+        className={styles.itemContainer}
+        ref={elem => {
+          dropTargetRef.current = elem;
+          dragRef.current = elem;
         }}
-        items={<EditDocPropertyMenuItems propertyId={propertyInfo.id} />}
+        onClick={handleClick}
+        data-testid="doc-property-manager-item"
       >
-        <IconButton size={20} iconClassName={styles.itemMore}>
-          <MoreHorizontalIcon />
-        </IconButton>
-      </Menu>
-      <DropIndicator edge={closestEdge} noTerminal />
-    </div>
+        <DocPropertyIcon
+          className={styles.itemIcon}
+          propertyInfo={propertyInfo}
+        />
+        <span className={styles.itemName}>
+          {propertyInfo.name ||
+            (typeInfo?.name ? t.t(typeInfo.name) : t['unnamed']())}
+        </span>
+        <span className={styles.itemVisibility}>
+          {propertyInfo.show === 'hide-when-empty'
+            ? t['com.affine.page-properties.property.hide-when-empty']()
+            : propertyInfo.show === 'always-hide'
+              ? t['com.affine.page-properties.property.always-hide']()
+              : t['com.affine.page-properties.property.always-show']()}
+        </span>
+        <Menu
+          rootOptions={{
+            open: moreMenuOpen,
+            onOpenChange: setMoreMenuOpen,
+            modal: true,
+          }}
+          items={<EditDocPropertyMenuItems propertyId={propertyInfo.id} />}
+        >
+          <IconButton size={20} iconClassName={styles.itemMore}>
+            <MoreHorizontalIcon />
+          </IconButton>
+        </Menu>
+        <DropIndicator edge={closestEdge} noTerminal />
+      </div>
+    </Tooltip>
   );
 };
 

packages/frontend/core/src/components/doc-properties/types/constant.tsx

@@ -27,46 +27,55 @@ export const DocPropertyTypes = {
     name: 'com.affine.page-properties.property.tags',
     uniqueId: 'tags',
     renameable: false,
+    description: 'com.affine.page-properties.property.tags.tooltips',
   },
   text: {
     icon: TextIcon,
     value: TextValue,
     name: 'com.affine.page-properties.property.text',
+    description: 'com.affine.page-properties.property.text.tooltips',
   },
   number: {
     icon: NumberIcon,
     value: NumberValue,
     name: 'com.affine.page-properties.property.number',
+    description: 'com.affine.page-properties.property.number.tooltips',
   },
   checkbox: {
     icon: CheckBoxCheckLinearIcon,
     value: CheckboxValue,
     name: 'com.affine.page-properties.property.checkbox',
+    description: 'com.affine.page-properties.property.checkbox.tooltips',
   },
   date: {
     icon: DateTimeIcon,
     value: DateValue,
     name: 'com.affine.page-properties.property.date',
+    description: 'com.affine.page-properties.property.date.tooltips',
   },
   createdBy: {
     icon: CreatedEditedIcon,
     value: CreatedByValue,
     name: 'com.affine.page-properties.property.createdBy',
+    description: 'com.affine.page-properties.property.createdBy.tooltips',
   },
   updatedBy: {
     icon: CreatedEditedIcon,
     value: UpdatedByValue,
     name: 'com.affine.page-properties.property.updatedBy',
+    description: 'com.affine.page-properties.property.updatedBy.tooltips',
   },
   docPrimaryMode: {
     icon: FileIcon,
     value: DocPrimaryModeValue,
     name: 'com.affine.page-properties.property.docPrimaryMode',
+    description: 'com.affine.page-properties.property.docPrimaryMode.tooltips',
   },
   journal: {
     icon: TodayIcon,
     value: JournalValue,
     name: 'com.affine.page-properties.property.journal',
+    description: 'com.affine.page-properties.property.journal.tooltips',
   },
 } as Record<
   string,
@@ -79,6 +88,7 @@ export const DocPropertyTypes = {
     uniqueId?: string;
     name: I18nString;
     renameable?: boolean;
+    description?: I18nString;
   }
 >;