Tooltip component final fix

components/Tooltip/Tooltip.jsx

@@ -19,8 +19,8 @@ class Tooltip extends Component {
     const pointerGap = this.props.pointerGap
     const tooltipPadding = this.props.tooltipPadding
     const tooltipDelay = this.props.tooltipDelay
-    const tooltip = ReactDOM.findDOMNode(this)
-    const ttContainer = tooltip.querySelector('.tooltip-container')
+    const tooltip = ReactDOM.findDOMNode(this).querySelector('.tooltip-container')
+    const ttContainer = tooltip.querySelector('.tooltip-content-container')
     const tooltipPointer = ttContainer.querySelector('.tooltip-pointer')
     const targetRect = evt.currentTarget.getBoundingClientRect()
     const targetRectCenterX = (targetRect.width / 2) + targetRect.left + window.scrollX
@@ -84,7 +84,7 @@ class Tooltip extends Component {
   }
 
   hideTooltip() {
-    const tooltip = ReactDOM.findDOMNode(this)
+    const tooltip = ReactDOM.findDOMNode(this).querySelector('.tooltip-container')
     if (!tooltip.classList.contains('tooltip-hide')) {
       tooltip.classList.add('tooltip-hide')
       tooltip.style.transition = 'opacity 0s linear'
@@ -103,8 +103,7 @@ class Tooltip extends Component {
   }
 
   componentDidMount() {
-    const targetId = this.props.tooltipId
-    const target = document.getElementById(targetId)
+    const target = ReactDOM.findDOMNode(this).querySelector('.tooltip-target')
     if (this.props.popMethod === 'hover') {
       target.addEventListener('mouseenter', this.showTooltip)
       target.addEventListener('mouseleave', this.hideTooltip)
@@ -115,8 +114,7 @@ class Tooltip extends Component {
   }
 
   componentWillUnmount() {
-    const targetId = this.props.tooltipId
-    const target = document.getElementById(targetId)
+    const target = ReactDOM.findDOMNode(this).querySelector('.tooltip-target')
     target.removeEventListener('mouseenter', this.showTooltip)
     target.removeEventListener('mouseleave', this.hideTooltip)
 
@@ -125,31 +123,40 @@ class Tooltip extends Component {
   }
 
   render() {
+
     const body = (
       <div className="tooltip-body">
           {React.Children.map(this.props.children, (child) => {
-            return child.props.children
+            if(child.props.className === 'tooltip-body')
+              return child.props.children
           })}
       </div>
     )
     const ttClasses = classNames(
-      'Tooltip', 'tooltip-hide', this.props.theme, this.props.className
+      'Tooltip', this.props.theme, this.props.className
     )
     return (
       <div className={ttClasses}>
-        <div className="tooltip-container">
-          <div className="tooltip-pointer">
+        {
+          React.Children.map(this.props.children, (child) => {
+            if(child.props.className === 'tooltip-target')
+              return child
+          })
+        }
+        <div className="tooltip-container tooltip-hide">
+          <div className="tooltip-content-container">
+            <div className="tooltip-pointer">
+            </div>
+            {body}
           </div>
-          {body}
         </div>
       </div>
     )
   }
 }
 
 Tooltip.propTypes = {
-  children       : PropTypes.object.isRequired,
-  tooltipId      : PropTypes.string.isRequired,
+  children       : PropTypes.array.isRequired,
   pointerWidth   : PropTypes.number,
   tooltipMargin  : PropTypes.number,
   pointerGap     : PropTypes.number,

components/Tooltip/Tooltip.scss

@@ -2,63 +2,64 @@
 
 $tc-gray-80: #47474f;
 
-.hastooltip {
-  cursor: default;
-
-  &.click-pointer {
-    cursor: pointer;
-  }
-}
-
 .Tooltip {
-  position: absolute;
-  white-space: nowrap;
-  display: block;
-  visibility: visible;
-  opacity: 1;
-  transition: opacity 0s linear;
-  z-index: 1000;
-  left: -9999px;
-  top: -9999px;
+  .tooltip-target {
+    cursor: default;
 
-  &.tooltip-hide {
-    visibility: hidden;
-    opacity: 0;
+    &.click-pointer {
+      cursor: pointer;
+    }
   }
-
   .tooltip-container {
-    background-color: $tc-gray-80;
-    color: #fff;
-    width: 100%;
-    height: 100%;
-    padding: 15px;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
+    position: absolute;
+    white-space: nowrap;
+    display: block;
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0s linear;
+    z-index: 1000;
+    left: -9999px;
+    top: -9999px;
 
-    .tooltip-pointer {
-      position: absolute;
-      height: 10px;
-      width: 10px;
-      background-color: $tc-gray-80;
-      transform: rotate(45deg);
-      bottom: -5px;
-      left: calc(50% - 5px);
-      z-index:-1;
+    &.tooltip-hide {
+      visibility: hidden;
+      opacity: 0;
     }
 
-    .tooltip-body {
-      position: relative;
+    .tooltip-content-container {
+      background-color: $tc-gray-80;
       color: #fff;
-      font-size: 14px;
-      padding: 0;
-      margin: 0;
-      z-index:2;
+      width: 100%;
+      height: 100%;
+      padding: 15px;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      border-radius: 5px;
+
+      .tooltip-pointer {
+        position: absolute;
+        height: 10px;
+        width: 10px;
+        background-color: $tc-gray-80;
+        transform: rotate(45deg);
+        bottom: -5px;
+        left: calc(50% - 5px);
+        z-index:-1;
+      }
+
+      .tooltip-body {
+        position: relative;
+        color: #fff;
+        font-size: 14px;
+        padding: 0;
+        margin: 0;
+        z-index:2;
+      }
     }
   }
   //tooltip theme styling
   &.default {
-    .tooltip-container {
+    .tooltip-content-container {
       //additional theme styling goes here
       .tooltip-pointer {
 
@@ -68,20 +69,4 @@ $tc-gray-80: #47474f;
       }
     }
   }
-  //custom theme
-  &.blue-round {
-    .tooltip-container {
-      background-color: #0000CC;
-      border: 3px solid #000;
-      -webkit-border-radius: 50%;
-      -moz-border-radius: 50%;
-      border-radius: 50%;
-      .tooltip-pointer {
-        background-color: #0000CC;
-      }
-      .tooltip-body {
-        color: #FFF;
-      }
-    }
-  }
 }

components/Tooltip/TooltipExamples.jsx

@@ -5,51 +5,45 @@ require('./TooltipExamples.scss')
 
 const TooltipExamples = () => (
   <div className="tooltip-examples-container">
-    <div className="hastooltip" id="tooltip-1">Default Mouseover Tooltip Example</div>
-
-    <Tooltip tooltipId="tooltip-1">
+    <Tooltip>
+      <div className="tooltip-target" id="tooltip-1">Default Mouseover Tooltip Example</div>
       <div className="tooltip-body">
         <p>This is a tooltip using the default theme.</p>
       </div>
     </Tooltip>
 
-    <div className="hastooltip" id="tooltip-2">Click Tooltip with Custom Classes Example</div>
-
-    <Tooltip tooltipId="tooltip-2" popMethod="click" className="TestClassOne CustomClass2 AnotherCustomClass">
+    <Tooltip popMethod="click" className="TestClassOne CustomClass2 AnotherCustomClass">
+      <div className="tooltip-target" id="tooltip-2">Click Tooltip with Custom Classes Example</div>
       <div className="tooltip-body">
         <p>This is a tooltip activated with a mouse click.</p>
         <p>This tooltip also contains custom classes passed through the tooltip component render.</p>
         <p>Click Target again to close tooltip.</p>
       </div>
     </Tooltip>
 
-    <div className="hastooltip" id="tooltip-3">Themed Tooltip Example</div>
-
-    <Tooltip tooltipId="tooltip-3" theme="blue-round">
+    <Tooltip theme="blue-round">
+      <div className="tooltip-target" id="tooltip-3">Themed Tooltip Example</div>
       <div className="tooltip-body">
         <p>This is a tooltip using a custom theme.</p>
       </div>
     </Tooltip>
 
-    <div className="hastooltip" id="tooltip-4">Delayed Tooltip Example</div>
-
-    <Tooltip tooltipId="tooltip-4" tooltipDelay={3000}>
+    <Tooltip tooltipDelay={3000}>
+      <div className="tooltip-target" id="tooltip-4">Delayed Tooltip Example</div>
       <div className="tooltip-body">
         <p>This is a tooltip with a 3 second popup delay and a transition effect.</p>
       </div>
     </Tooltip>
 
-    <div className="hastooltip" id="tooltip-5">Alternative Spacing Tooltip Example</div>
-
-    <Tooltip tooltipId="tooltip-5" pointerWidth={20} tooltipMargin={25} tooltipPadding={5} pointerGap={1}>
+    <Tooltip pointerWidth={20} tooltipMargin={25} tooltipPadding={5} pointerGap={1}>
+      <div className="tooltip-target" id="tooltip-5">Alternative Spacing Tooltip Example</div>
       <div className="tooltip-body">
-        <p>This is a tooltip with alternative padding, margin, pointer size and gap sized configured through tooltip custom attributes.</p>
+        <p>This is a tooltip with alternative padding, margin, pointer size and gap size configured through tooltip custom attributes.</p>
       </div>
     </Tooltip>
 
-    <img src="http://placekitten.com/200/200" className="hastooltip" id="tooltip-6" alt="tooltip on image target example" />
-
-    <Tooltip tooltipId="tooltip-6">
+    <Tooltip>
+      <img src="http://placekitten.com/200/200" className="tooltip-target" id="tooltip-6" alt="tooltip on image target example" />
       <div className="tooltip-body">
         <p>This is a tooltip on an image and also containing an image.</p>
         <p>Tooltips can be applied to any HTML tag, and contain any content.</p>

components/Tooltip/TooltipExamples.scss

@@ -1,48 +1,67 @@
 .tooltip-examples-container {
-  .hastooltip {
-    position: relative;
-    width: 150px;
-    background-color: #999;
-    height: 150px;
-    margin: 10px;
-    font-size: 14px;
-    font-weight: bold;
-    color: #fff;
-    text-align: center;
-    padding: 15px;
-
-    &#tooltip-1 {
-      float: left;
-    }
 
-    &#tooltip-2 {
-      float: right;
-      width: 50%;
-      background-color: #C00;
-    }
+  .Tooltip {
+    .tooltip-target {
+      position: relative;
+      width: 150px;
+      background-color: #999;
+      height: 150px;
+      margin: 10px;
+      font-size: 14px;
+      font-weight: bold;
+      color: #fff;
+      text-align: center;
+      padding: 15px;
 
-    &#tooltip-3 {
-      clear: both;
-      margin-left: 25%;
-      background-color: #CC0;
+      &#tooltip-1 {
+        float: left;
+      }
 
-    }
+      &#tooltip-2 {
+        float: right;
+        width: 50%;
+        background-color: #C00;
+      }
 
-    &#tooltip-4 {
-      margin-left: 50%;
-      background-color: #0C0;
-    }
+      &#tooltip-3 {
+        clear: both;
+        margin-left: 25%;
+        background-color: #CC0;
 
-    &#tooltip-5 {
-      margin-left: 75%;
-      background-color: #00C;
-    }
+      }
+
+      &#tooltip-4 {
+        margin-left: 50%;
+        background-color: #0C0;
+      }
 
-    &#tooltip-6 {
-      margin-left: calc(100% - 200px);
-      padding: 0;
-      height: 200px;
-      width: 200px;
+      &#tooltip-5 {
+        margin-left: 75%;
+        background-color: #00C;
+      }
+
+      &#tooltip-6 {
+        margin-left: calc(100% - 200px);
+        padding: 0;
+        height: 200px;
+        width: 200px;
+      }
+    }
+    //custom theme
+    &.blue-round {
+      .tooltip-content-container {
+        background-color: #0000CC;
+        border: 3px solid #000;
+        -webkit-border-radius: 50%;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        .tooltip-pointer {
+          background-color: #0000CC;
+        }
+        .tooltip-body {
+          color: #FFF;
+        }
+      }
     }
   }
 }