Add title prop to Badge that shows when hovering it

components/badge/__tests__/__snapshots__/demo.test.js.snap

@@ -1617,3 +1617,177 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = `
   </span>
 </div>
 `;
+
+exports[`renders ./components/badge/demo/title.md correctly 1`] = `
+<div>
+  <span
+    class="ant-badge"
+  >
+    <a
+      class="head-example"
+      href="#"
+    />
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="Custom hover text"
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+      >
+        <p
+          class=""
+        >
+          0
+        </p>
+        <p
+          class=""
+        >
+          1
+        </p>
+        <p
+          class=""
+        >
+          2
+        </p>
+        <p
+          class=""
+        >
+          3
+        </p>
+        <p
+          class=""
+        >
+          4
+        </p>
+        <p
+          class=""
+        >
+          5
+        </p>
+        <p
+          class=""
+        >
+          6
+        </p>
+        <p
+          class=""
+        >
+          7
+        </p>
+        <p
+          class=""
+        >
+          8
+        </p>
+        <p
+          class=""
+        >
+          9
+        </p>
+        <p
+          class=""
+        >
+          0
+        </p>
+        <p
+          class=""
+        >
+          1
+        </p>
+        <p
+          class=""
+        >
+          2
+        </p>
+        <p
+          class=""
+        >
+          3
+        </p>
+        <p
+          class=""
+        >
+          4
+        </p>
+        <p
+          class="current"
+        >
+          5
+        </p>
+        <p
+          class=""
+        >
+          6
+        </p>
+        <p
+          class=""
+        >
+          7
+        </p>
+        <p
+          class=""
+        >
+          8
+        </p>
+        <p
+          class=""
+        >
+          9
+        </p>
+        <p
+          class=""
+        >
+          0
+        </p>
+        <p
+          class=""
+        >
+          1
+        </p>
+        <p
+          class=""
+        >
+          2
+        </p>
+        <p
+          class=""
+        >
+          3
+        </p>
+        <p
+          class=""
+        >
+          4
+        </p>
+        <p
+          class=""
+        >
+          5
+        </p>
+        <p
+          class=""
+        >
+          6
+        </p>
+        <p
+          class=""
+        >
+          7
+        </p>
+        <p
+          class=""
+        >
+          8
+        </p>
+        <p
+          class=""
+        >
+          9
+        </p>
+      </span>
+    </sup>
+  </span>
+</div>
+`;

components/badge/__tests__/index.test.js

@@ -7,8 +7,14 @@ describe('Badge', () => {
     const badge = mount(<Badge count={10} dot />);
     expect(badge.find('.ant-card-multiple-words').length).toBe(0);
   });
+
   test('badge dot not showing count == 0', () => {
     const badge = mount(<Badge count={0} dot />);
     expect(badge.find('.ant-badge-dot').length).toBe(0);
   });
+
+  it('should have an overriden title attribute', () => {
+    const badge = mount(<Badge count={10} title="Custom title" />);
+    expect(badge.find('.ant-scroll-number').getDOMNode().attributes.getNamedItem('title').value).toEqual('Custom title');
+  });
 });

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(
+  <div>
+    <Badge count={5} title="Custom hover text">
+      <a href="#" className="head-example" />
+    </Badge>
+  </div>
+, mountNode);
+````
+
+<style>
+.ant-badge:not(.ant-badge-status) {
+  margin-right: 20px;
+}
+.head-example {
+  width: 42px;
+  height: 42px;
+  border-radius: 4px;
+  background: #eee;
+  display: inline-block;
+}
+</style>

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` |

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<BadgeProps, any> {
@@ -57,6 +58,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
       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<BadgeProps, any> {
         data-show={!hidden}
         className={scrollNumberCls}
         count={displayCount}
-        title={count}
+        title={title || count}
         style={styleWithOffset}
       />
     );

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` |