Merge pull request #254 from jonbeller/issue-242-add-className-prop

Add support for className prop

Author: wwayne

README.md

@@ -57,7 +57,7 @@ Global|Specific	|Type	|Values  |  Description
  isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture
  offset	|   data-offset  |  Object  |  top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global
 multiline	|   data-multiline  |  Bool  |  true, false | support `<br>`, `<br />` to make multiline
-class	|   data-class  |  String  |   | extra custom class, can use !important to overwrite react-tooltip's default class
+className	|   data-class  |  String  |   | extra custom class, can use !important to overwrite react-tooltip's default class
  html	|   data-html  |  Bool  |  true, false  |  `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
  delayHide	|   data-delay-hide  |  Number  |   | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
  delayShow	|   data-delay-show  |  Number  |   | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
@@ -116,7 +116,7 @@ The component was designed to set a `<Reactooltip />` one place then use tooltip
 
 1. Put `<ReactTooltip />` out of the `<Modal>`
 2. Use `ReactTooltip.rebuild()` when opening the modal
-3. If your modal's z-index happens to higher than the tooltip, use the attribute `class` to custom your tooltip's z-index
+3. If your modal's z-index happens to higher than the tooltip, use the attribute `className` to custom your tooltip's z-index
 
 >I suggest always put `<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
 method to control tooltip's behaviour in some situations

example/src/index.js

@@ -182,18 +182,18 @@ const Test = React.createClass({
               <div className="side">
                 <a data-for='custom-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
                 {/* <a data-for='custom-class' data-tip='' data-tip-disable='true'>empty testing</a> */}
-                <ReactTooltip id='custom-class' class='extraClass' delayHide={1000} effect='solid'/>
+                <ReactTooltip id='custom-class' className='extraClass' delayHide={1000} effect='solid'/>
               </div>
               <div className="side">
                 <a data-for='custom-theme' data-tip='custom theme'>(･ω´･ )</a>
-                <ReactTooltip id='custom-theme' class='customeTheme'/>
+                <ReactTooltip id='custom-theme' className='customeTheme'/>
               </div>
             </div>
             <br />
             <pre className='example-pre'>
               <div>
                 <p>{"<a data-tip='hover on me will keep the tootlip'>(･ω´･ )́)</a>\n" +
-                "<ReactTooltip class='extraClass' delayHide={1000} effect='solid'/>\n" +
+                "<ReactTooltip className='extraClass' delayHide={1000} effect='solid'/>\n" +
                 ".extraClass {\n" +
                   " font-size: 20px !important;\n" +
                   " pointer-events: auto !important;\n" +
@@ -205,7 +205,7 @@ const Test = React.createClass({
               </div>
               <div>
                 <p>{"<a data-tip='custom theme'>(･ω´･ )́)</a>\n" +
-                "<ReactTooltip class='customeTheme'/>\n" +
+                "<ReactTooltip className='customeTheme'/>\n" +
                 " .customeTheme {\n" +
                   " color: #ff6e00 !important;\n" +
                   " background-color: orange !important;\n" +
@@ -252,4 +252,4 @@ const Test = React.createClass({
   }
 })
 
-render(<Test />, document.getElementById('main'))
+render(<Test />, document.getElementById('main'))

src/index.js

@@ -32,6 +32,7 @@ class ReactTooltip extends Component {
     border: PropTypes.bool,
     insecure: PropTypes.bool,
     class: PropTypes.string,
+    className: PropTypes.string,
     id: PropTypes.string,
     html: PropTypes.bool,
     delayHide: PropTypes.number,
@@ -277,7 +278,7 @@ class ReactTooltip extends Component {
       border: e.currentTarget.getAttribute('data-border')
         ? e.currentTarget.getAttribute('data-border') === 'true'
         : (this.props.border || false),
-      extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || '',
+      extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || this.props.className || '',
       disable: e.currentTarget.getAttribute('data-tip-disable')
         ? e.currentTarget.getAttribute('data-tip-disable') === 'true'
         : (this.props.disable || false)