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;
   }
 >;
 

packages/frontend/i18n/src/resources/en.json

@@ -656,6 +656,21 @@
   "com.affine.page-properties.property.journal-duplicated": "Duplicated",
   "com.affine.page-properties.property.journal-remove": "Remove journal mark",
   "com.affine.page-properties.property.updatedBy": "Last edited by",
+  "com.affine.page-properties.property.tags.tooltips": "Add relevant identifiers or categories to the doc. Useful for organizing content, improving searchability, and grouping related docs together.",
+  "com.affine.page-properties.property.journal.tooltips": "Indicates that this doc is a journal entry or daily note. Facilitates easy capture of ideas, quick logging of thoughts, and ongoing personal reflection.",
+  "com.affine.page-properties.property.checkbox.tooltips": "Use a checkbox to indicate whether a condition is true or false. Useful for confirming options, toggling features, or tracking task states.",
+  "com.affine.page-properties.property.date.tooltips": "Use a date field to select or display a specific date. Useful for scheduling, setting deadlines, or recording important events.",
+  "com.affine.page-properties.property.image.tooltips": "Upload images to display or manage them. Useful for showcasing visual content, adding illustrations, or organizing a gallery.",
+  "com.affine.page-properties.property.multiSelect.tooltips": "Select one or more options. Useful for categorizing items, filtering data, or managing tags.",
+  "com.affine.page-properties.property.number.tooltips": "Enter a numeric value. Useful for quantities, measurements, or ranking items.",
+  "com.affine.page-properties.property.progress.tooltips": "Set a progress value between 0 and 100. Useful for tracking completion status, visualizing progress, or managing goals.",
+  "com.affine.page-properties.property.select.tooltips": "Choose one option. Useful for selecting a single preference, categorizing items, or making decisions.",
+  "com.affine.page-properties.property.link.tooltips": "Enter a link to websites or AFFiNE docs. Useful for connecting to external resources and referencing internal docs.",
+  "com.affine.page-properties.property.text.tooltips": "Enter text. Useful for descriptions, comments, notes, or any other free-form text input.",
+  "com.affine.page-properties.property.createdBy.tooltips": "Displays the author of the current doc. Useful for tracking doc ownership, accountability, and collaboration.",
+  "com.affine.page-properties.property.updatedBy.tooltips": "Displays the last editor of the current doc. Useful for tracking recent changes.",
+  "com.affine.page-properties.property.docPrimaryMode.tooltips": "Select the doc mode from Page Mode, Edgeless Mode, or Auto. Useful for choosing the best display for your content.",
+  "com.affine.page-properties.property.docTheme.tooltips": "Select the doc theme from Light, Dark, or System. Useful for precise control over content viewing style.",
   "com.affine.propertySidebar.property-list.section": "Properties",
   "com.affine.propertySidebar.add-more.section": "Add more properties",
   "com.affine.page-properties.settings.title": "customize properties",

packages/frontend/i18n/src/resources/zh-Hans.json

@@ -648,6 +648,21 @@
   "com.affine.page-properties.property.docPrimaryMode": "文档模式",
   "com.affine.page-properties.property.text": "文本",
   "com.affine.page-properties.property.updatedBy": "最后编辑者",
+  "com.affine.page-properties.property.tags.tooltips": "为文档添加相关标识或类别，有助于组织内容、提高搜索效率并将相关文档归类。",
+  "com.affine.page-properties.property.journal.tooltips": "标识此文档为日志条目或日记，方便捕捉灵感、快速记录或自我反省。",
+  "com.affine.page-properties.property.checkbox.tooltips": "用于标记该条目完成与否，适合确认选项、切换功能或跟踪任务状态。",
+  "com.affine.page-properties.property.date.tooltips": "选择或显示特定日期，适用于安排计划、设定截止日期或记录重要事件。",
+  "com.affine.page-properties.property.image.tooltips": "上传和管理图片，用于展示视觉内容、插图或创建画廊。",
+  "com.affine.page-properties.property.multiSelect.tooltips": "可选择多个选项，适合分类、数据筛选或管理标签。",
+  "com.affine.page-properties.property.number.tooltips": "输入数值，用于数量、测量或排名。",
+  "com.affine.page-properties.property.progress.tooltips": "设置0到100之间的进度值，适合跟踪完成度、可视化进展或管理目标。",
+  "com.affine.page-properties.property.select.tooltips": "选择一个选项，适用于单项选择、分类或决策。",
+  "com.affine.page-properties.property.link.tooltips": "输入网站或 AFFiNE 文档链接，用于连接资源或引用内部文档。",
+  "com.affine.page-properties.property.text.tooltips": "输入文字，用于描述、评论或记录笔记。",
+  "com.affine.page-properties.property.createdBy.tooltips": "显示当前文档的作者，用于跟踪所有权和协作情况。",
+  "com.affine.page-properties.property.updatedBy.tooltips": "显示文档的最后编辑者，方便跟踪最新更改。",
+  "com.affine.page-properties.property.docPrimaryMode.tooltips": "选择页面模式、无边界模式或自动模式，适合根据内容选择最佳显示方式。",
+  "com.affine.page-properties.property.docTheme.tooltips": "选择浅色、深色或系统主题，精确控制内容的查看样式。",
   "com.affine.page-properties.settings.title": "自定义属性",
   "com.affine.page-properties.tags.open-tags-page": "打开标签页面",
   "com.affine.page-properties.tags.selector-header-title": "选择或者创建一个标签",