diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index 23f60c4a5a..bc6061119d 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -1617,3 +1617,177 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
`;
+
+exports[`renders ./components/badge/demo/title.md correctly 1`] = `
+
+
+
+
+
+
+ 0
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+ 0
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+ 0
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+ 7
+
+
+ 8
+
+
+ 9
+
+
+
+
+
+`;
diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js
index 964d6232c0..80554961bb 100644
--- a/components/badge/__tests__/index.test.js
+++ b/components/badge/__tests__/index.test.js
@@ -7,8 +7,14 @@ describe('Badge', () => {
const badge = mount();
expect(badge.find('.ant-card-multiple-words').length).toBe(0);
});
+
test('badge dot not showing count == 0', () => {
const badge = mount();
expect(badge.find('.ant-badge-dot').length).toBe(0);
});
+
+ it('should have an overriden title attribute', () => {
+ const badge = mount();
+ expect(badge.find('.ant-scroll-number').getDOMNode().attributes.getNamedItem('title').value).toEqual('Custom title');
+ });
});
diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md
new file mode 100644
index 0000000000..36714ca047
--- /dev/null
+++ b/components/badge/demo/title.md
@@ -0,0 +1,39 @@
+---
+order: 7
+title:
+ zh-CN: 自定义标题
+ en-US: Title
+---
+
+## zh-CN
+
+设置鼠标放在状态点上时显示的文字
+
+## en-US
+
+The badge will display `title` when hovered over, instead of `count`.
+
+````jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(
+
+, mountNode);
+````
+
+
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 546169ac39..834e3fd7dd 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -31,3 +31,4 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
| showZero | Whether to show badge when `count` is zero | boolean | `false` |
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |
| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |
+| title | Text to show when hovering over the badge | string | `count` |
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index 8e61e785cd..9d442bacfe 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -21,6 +21,7 @@ export interface BadgeProps {
status?: 'success' | 'processing' | 'default' | 'error' | 'warning';
text?: string;
offset?: [number | string, number | string];
+ title?: string;
}
export default class Badge extends React.Component {
@@ -57,6 +58,7 @@ export default class Badge extends React.Component {
status,
text,
offset,
+ title,
...restProps,
} = this.props;
let displayCount = (count as number) > (overflowCount as number) ? `${overflowCount}+` : count;
@@ -103,7 +105,7 @@ export default class Badge extends React.Component {
data-show={!hidden}
className={scrollNumberCls}
count={displayCount}
- title={count}
+ title={title || count}
style={styleWithOffset}
/>
);
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index c4dd553585..f794f02615 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -32,3 +32,4 @@ title: Badge
| showZero | 当数值为 0 时,是否展示 Badge | boolean | false |
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
| text | 在设置了 `status` 的前提下有效,设置状态点的文本 | string | '' |
+| title | 设置鼠标放在状态点上时显示的文字 | string | `count` |