From 0376e74d54dfa8a1d56e76b56b33efde9ee86745 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Fri, 15 Nov 2024 11:25:58 +0800
Subject: [PATCH] feat(checkbox): support title API

---
 src/checkbox/checkbox.en-US.md         | 1 +
 src/checkbox/checkbox.md               | 1 +
 src/checkbox/type.ts                   | 5 +++++
 src/common/Check.tsx                   | 2 ++
 src/table/_example/select-multiple.tsx | 2 +-
 5 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/checkbox/checkbox.en-US.md b/src/checkbox/checkbox.en-US.md
index 116ca2a5a7..9bec6f80fa 100644
--- a/src/checkbox/checkbox.en-US.md
+++ b/src/checkbox/checkbox.en-US.md
@@ -16,6 +16,7 @@ indeterminate | Boolean | false | \- | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 name | String | - | \- | N
 readonly | Boolean | false | \- | N
+title | String | - | html attribute | N
 value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
 onChange | Function |  | Typescript：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on click | N
diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md
index 1393819bab..32b974a349 100644
--- a/src/checkbox/checkbox.md
+++ b/src/checkbox/checkbox.md
@@ -21,6 +21,7 @@ indeterminate | Boolean | false | 是否为半选 | N
 label | TNode | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 name | String | - | HTML 元素原生属性 | N
 readonly | Boolean | false | 只读状态 | N
+title | String | - | HTML 原生属性 | N
 value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/>值变化时触发 | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发，一般用于外层阻止冒泡场景 | N
diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts
index 418904b76a..46972166ec 100644
--- a/src/checkbox/type.ts
+++ b/src/checkbox/type.ts
@@ -50,6 +50,11 @@ export interface TdCheckboxProps {
    * @default false
    */
   readonly?: boolean;
+  /**
+   * HTML 原生属性
+   * @default ''
+   */
+  title?: string;
   /**
    * 多选框的值
    */
diff --git a/src/common/Check.tsx b/src/common/Check.tsx
index f2a0f07cbc..9ec859aa3e 100644
--- a/src/common/Check.tsx
+++ b/src/common/Check.tsx
@@ -46,6 +46,7 @@ const Check = forwardRef<HTMLLabelElement, CheckProps>((_props, ref) => {
     style,
     readonly,
     onClick,
+    title,
     ...htmlProps
   } = props;
 
@@ -74,6 +75,7 @@ const Check = forwardRef<HTMLLabelElement, CheckProps>((_props, ref) => {
       checked={internalChecked}
       disabled={disabled}
       name={name}
+      title={title}
       tabIndex={-1}
       value={isBoolean(value) ? Number(value) : value}
       data-value={typeof value === 'string' ? `'${value}'` : value}
diff --git a/src/table/_example/select-multiple.tsx b/src/table/_example/select-multiple.tsx
index 32f8953b79..02cafd044f 100644
--- a/src/table/_example/select-multiple.tsx
+++ b/src/table/_example/select-multiple.tsx
@@ -19,7 +19,7 @@ const columns: TableProps['columns'] = [
 
     // 禁用行选中方式二：使用 checkProps 禁用行（示例代码有效，勿删）
     // 这种方式禁用行选中，行文本不会变灰
-    checkProps: ({ rowIndex }) => ({ disabled: rowIndex % 2 !== 0 }),
+    checkProps: ({ rowIndex }) => ({ disabled: rowIndex % 2 !== 0, title: rowIndex % 2 !== 0 ? '不可选' : null }),
     width: 50,
   },
   { colKey: 'applicant', title: '申请人', width: '100' },