Repository: react-materialize/react-materialize (js)

Issue:
Button -> tooltip does nothing
```
<Button floating fab='vertical' icon='more_horiz' large style={{bottom: '45px', right: '24px'}}>
    <Button tooltip='Hello world!' floating icon='format_quote' className='yellow darken-1'>
        <a href=""><i className="material-icons">play_arrow</i></a>
    </Button>
</Button>
```

But I do not see some tooltip


Pull request:
Add Tooltips for buttons.
# Description

Added support for Tooptips for buttons. 

Fixes #69 

## Type of change

- [x] New feature (non-breaking change which adds functionality)
- [x] This change requires a documentation update

# How Has This Been Tested?

Add tooltip property to a Button

# Checklist:

- [x] I have commented my code, particularly in hard-to-understand areas 
- [x] My changes generate no new warnings
- [x] I have not generated a new package version. (the maintainers will handle that)


Patch:
diff --git a/src/Button.js b/src/Button.js
index 3e8aa4d..ae4d2f5 100644
--- a/src/Button.js
+++ b/src/Button.js
@@ -12,6 +12,16 @@ class Button extends Component {
     this.renderFab = this.renderFab.bind(this);
   }
 
+  componentDidMount() {
+    const { tooltip, tooltipOptions } = this.props;
+    if (
+      typeof $ !== 'undefined' &&
+      (typeof tooltip !== 'undefined' || typeof tooltipOptions !== 'undefined')
+    ) {
+      $(this._btnEl).tooltip(tooltipOptions);
+    }
+  }
+
   render() {
     const {
       className,
@@ -24,6 +34,7 @@ class Button extends Component {
       large,
       disabled,
       waves,
+      tooltip,
       ...other
     } = this.props;
 
@@ -57,6 +68,8 @@ class Button extends Component {
           disabled={!!disabled}
           onClick={this.props.onClick}
           className={cx(classes, className)}
+          ref={el => (this._btnEl = el)}
+          data-tooltip={tooltip}
         >
           {this.renderIcon()}
           {this.props.children}
@@ -117,6 +130,16 @@ Button.propTypes = {
    * Tooltip to show when mouse hovered
    */
   tooltip: PropTypes.string,
+  /**
+   * Tooltips options as here
+   * http://archives.materializecss.com/0.100.2/dialogs.html#tooltip
+   */
+  tooltipOptions: PropTypes.shape({
+    delay: PropTypes.number,
+    position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    tooltip: PropTypes.string,
+    html: PropTypes.bool
+  }),
   waves: PropTypes.oneOf([
     'light',
     'red',


Test patch:
diff --git a/test/Button.spec.js b/test/Button.spec.js
index c3c8ade..ed35495 100644
--- a/test/Button.spec.js
+++ b/test/Button.spec.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import Button from '../src/Button';
+import mocker from './helper/mocker';
 
 describe('Button', () => {
   let wrapper;
+
   beforeEach(() => {
     wrapper = shallow(<Button waves="light">Stuff</Button>);
   });
@@ -65,4 +67,24 @@ describe('Button', () => {
       expect(wrapper.prop('disabled')).toEqual(true);
     });
   });
+
+  describe('with a tooltip', () => {
+    let tooltip = 'Hello';
+    let tooltipOptions = {
+      position: 'top',
+      delay: 50
+    };
+
+    const tooltipMock = jest.fn();
+    mocker('tooltip', tooltipMock);
+    wrapper = shallow(<Button tooltip={tooltip}>Stuff</Button>);
+    test('initializes Button with tooltip', () => {
+      expect(tooltipMock).toHaveBeenCalled();
+    });
+
+    wrapper = shallow(<Button tooltipOptions={tooltipOptions}>Stuff</Button>);
+    test('initializes Button with tooltip options', () => {
+      expect(tooltipMock).toHaveBeenCalledWith(tooltipOptions);
+    });
+  });
 });