Give id and class to html elements

Author: kuy

README.md

@@ -42,6 +42,7 @@ Please check out [examples](https://github.com/kuy/redux-tooltip/tree/master/exa
 + [Remote](http://kuy.github.io/redux-tooltip/remote.html)
 + [Content](http://kuy.github.io/redux-tooltip/content.html)
 + [Multiple](http://kuy.github.io/redux-tooltip/multiple.html)
++ [Style](http://kuy.github.io/redux-tooltip/style.html)
 
 ## Getting Started
 
@@ -128,6 +129,8 @@ A tooltip component. Please wrap a content which should be shown in a tooltip.
 + `within` *(`DOM`)*: A DOM element which is used to restrict the position where this tooltip is placed within.
 + `onHover` *(`Function`)*: A callback function to be called on mouseover at tooltip.
 + `onLeave` *(`Function`)*: A callback function to be called on mouseout at tooltip.
++ `id` *(`string`)*: An `id` attribute passed to `<div>` element of a tooltip.
++ `className` *(`string`)*: A `class` attribute passed to `<div>` element of a tooltip.
 
 ### `<Origin />`
 

examples/style.css

@@ -13,6 +13,14 @@ body {
   background: #FFCDD2 !important;
 }
 
+#my-id-arrow > span {
+  border-color: #FFCDD2 transparent transparent transparent !important;
+}
+
 .my-class {
   background: #BBDEFB !important;
 }
+
+.my-class .my-class-arrow > span {
+  border-color: #BBDEFB transparent transparent transparent !important;
+}

src/tooltip.js

@@ -30,6 +30,8 @@ class Tooltip extends Component {
 
       // Props from wrapper props
       name: PropTypes.string,
+      id: PropTypes.string,
+      className: PropTypes.string,
       onHover: PropTypes.func,
       onLeave: PropTypes.func,
     };
@@ -75,7 +77,7 @@ class Tooltip extends Component {
   }
 
   render () {
-    const { show, onHover, onLeave } = this.props;
+    const { id, className, show, onHover, onLeave } = this.props;
     const origin = originOrEl(this.props);
     const { place, offset } = this.state;
     const content = this.children();
@@ -93,17 +95,34 @@ class Tooltip extends Component {
         <div
           ref="tooltip"
           style={style.base}
+          id={id}
+          className={className}
           onMouseEnter={onHover}
           onMouseLeave={onLeave}
         >
-          <div ref="content" style={style.content}>
+          <div
+            ref="content"
+            style={style.content}
+            id={`${id}-content`}
+            className={`${className}-content`}
+          >
             {content}
           </div>
-          <div style={style.arrow} key={`a-${place}`}>
+          <div
+            style={style.arrow}
+            id={`${id}-arrow`}
+            className={`${className}-arrow`}
+            key={`a-${place}`}
+          >
             <span ref="border" style={style.border} key={`b-${place}`}></span>
           </div>
         </div>
-        <div ref="shadow" style={style.shadow} />
+        <div
+          ref="shadow"
+          style={style.shadow}
+          id={`${id}-shadow`}
+          className={`${className}-shadow`}
+        />
       </div>
     );
   }