[fixed] Tooltip accepts a style prop

fixes react-bootstrap#1027
kyletsang · Jul 20, 2015 · 924f8fb · 924f8fb
1 parent 91802f6
commit 924f8fb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -43,7 +43,11 @@ const Tooltip = React.createClass({
     /**
      * Title text
      */
-    title: React.PropTypes.node
+    title: React.PropTypes.node,
+    /**
+     * Style hash
+     */
+    style: React.PropTypes.object
   },
 
   getDefaultProps() {
@@ -60,7 +64,8 @@ const Tooltip = React.createClass({
 
     const style = {
       'left': this.props.positionLeft,
-      'top': this.props.positionTop
+      'top': this.props.positionTop,
+      ...this.props.style
     };
 
     const arrowStyle = {

diff --git a/test/TooltipSpec.js b/test/TooltipSpec.js
@@ -5,12 +5,25 @@ import Tooltip from '../src/Tooltip';
 describe('Tooltip', function () {
   it('Should output a tooltip with content', function () {
     let instance = ReactTestUtils.renderIntoDocument(
-      <Tooltip>
+      <Tooltip positionTop={10} positionLeft={20}>
         <strong>Tooltip Content</strong>
       </Tooltip>
     );
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
 
+    const tooltip = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tooltip');
+    assert.deepEqual(tooltip.props.style, {top: 10, left: 20});
   });
 
+  describe('When a style property is provided', function () {
+    it('Should render a tooltip with merged styles', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Tooltip style={{opacity: 0.9}} positionTop={10} positionLeft={20}>
+          <strong>Tooltip Content</strong>
+        </Tooltip>
+      );
+      const tooltip = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tooltip');
+      assert.deepEqual(tooltip.props.style, {opacity: 0.9, top: 10, left: 20});
+    });
+  });
 });