Merge pull request #97 from dsumer/master

Added Screenreader-Support with ariaId

Author: paranoidjk

README.md

@@ -181,13 +181,32 @@ Online examples: [http://react-component.github.io/tooltip/examples/](http://rea
           <td>false</td>
           <td>whether destroy tooltip when tooltip is hidden</td>
         </tr>
+        <tr>
+          <td>id</td>
+          <td>String</td>
+          <td></td>
+          <td>Id which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support.</td>
+        </tr>
     </tbody>
 </table>
 
 ## Note
 
 `Tooltip` requires child node accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` event.
 
+## Accessibility
+
+For accessibility purpose you can use the `id` prop to link your tooltip with another element. For example attaching it to an input element:
+```jsx
+<Tooltip
+    ...
+    id={this.props.name}>
+    <input type="text"
+           ...
+           aria-describedby={this.props.name}/>
+</Tooltip>
+```
+If you do it like this, a screenreader would read the content of your tooltip if you focus the input element.
 
 ## Development
 

src/Tooltip.jsx

@@ -27,6 +27,7 @@ class Tooltip extends Component {
     destroyTooltipOnHide: PropTypes.bool,
     align: PropTypes.object,
     arrowContent: PropTypes.any,
+    id: PropTypes.string,
   };
 
   static defaultProps = {
@@ -41,12 +42,12 @@ class Tooltip extends Component {
   };
 
   getPopupElement = () => {
-    const { arrowContent, overlay, prefixCls } = this.props;
+    const { arrowContent, overlay, prefixCls, id } = this.props;
     return ([
       <div className={`${prefixCls}-arrow`} key="arrow">
         {arrowContent}
       </div>,
-      <div className={`${prefixCls}-inner`} key="content">
+      <div className={`${prefixCls}-inner`} key="content" id={id}>
         {typeof overlay === 'function' ? overlay() : overlay}
       </div>,
     ]);