Add countTransform attribute #142

Author: wwayne

README.md

@@ -62,6 +62,7 @@ class	|   data-class  |  String  |   | extra custom class, can use !important to
  delayShow	|   data-delay-show  |  Number  |   | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
  border  |   data-border  |  Bool  |  true, false | Add one pixel white border
  getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
+ countTransform | data-count-transform | Bool | True, False | Tell tooltip if it needs to count parents' transform into position calculation, the default is true, but it should be set to false when using with react-list
 
 ## Using react component as tooltip
 Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)

example/src/index.js

@@ -147,24 +147,24 @@ const Test = React.createClass({
 
         <section className="advance">
           <div className="section">
-            <h4 className='title'>Customer event</h4>
+            <h4 className='title'>Custom event</h4>
             <p className="sub-title"></p>
 
             <div className="example-jsx">
               <div className="side">
-                <a data-for='customer-event' data-tip='customer show' data-event='click focus'>( •̀д•́)</a>
-                <ReactTooltip id='customer-event' globalEventOff='click'/>
+                <a data-for='custom-event' data-tip='custom show' data-event='click focus'>( •̀д•́)</a>
+                <ReactTooltip id='custom-event' globalEventOff='click'/>
               </div>
 
               <div className="side">
-                <a data-for='customer-off-event' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
-                <ReactTooltip id='customer-off-event'/>
+                <a data-for='custom-off-event' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
+                <ReactTooltip id='custom-off-event'/>
               </div>
             </div>
             <br />
             <pre className='example-pre'>
               <div>
-                <p>{"<a data-tip='customer show' data-event='click focus'>( •̀д•́)</a>\n" +
+                <p>{"<a data-tip='custom show' data-event='click focus'>( •̀д•́)</a>\n" +
                 "<ReactTooltip globalEventOff='click' />"}</p>
               </div>
               <div>
@@ -180,13 +180,13 @@ const Test = React.createClass({
 
             <div className="example-jsx">
               <div className="side">
-                <a data-for='customer-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
-                <ReactTooltip id='customer-class' class='extraClass' delayHide={1000} effect='solid'/>
+                <a data-for='custom-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
+                <ReactTooltip id='custom-class' class='extraClass' delayHide={1000} effect='solid'/>
               </div>
 
               <div className="side">
-                <a data-for='customer-theme' data-tip='custom theme'>(･ω´･ )</a>
-                <ReactTooltip id='customer-theme' class='customeTheme'/>
+                <a data-for='custom-theme' data-tip='custom theme'>(･ω´･ )</a>
+                <ReactTooltip id='custom-theme' class='customeTheme'/>
               </div>
             </div>
             <br />

src/index.js

@@ -38,7 +38,8 @@ class ReactTooltip extends Component {
     watchWindow: PropTypes.bool,
     isCapture: PropTypes.bool,
     globalEventOff: PropTypes.string,
-    getContent: PropTypes.any
+    getContent: PropTypes.any,
+    countTransform: PropTypes.bool
   }
 
   constructor (props) {
@@ -208,11 +209,18 @@ class ReactTooltip extends Component {
       type: e.currentTarget.getAttribute('data-type') || this.props.type || 'dark',
       effect: isFocus && 'solid' || e.currentTarget.getAttribute('data-effect') || this.props.effect || 'float',
       offset: e.currentTarget.getAttribute('data-offset') || this.props.offset || {},
-      html: e.currentTarget.getAttribute('data-html') === 'true' || this.props.html || false,
+      html: e.currentTarget.getAttribute('data-html')
+        ? e.currentTarget.getAttribute('data-html') === 'true'
+        : (this.props.html || false),
       delayShow: e.currentTarget.getAttribute('data-delay-show') || this.props.delayShow || 0,
       delayHide: e.currentTarget.getAttribute('data-delay-hide') || this.props.delayHide || 0,
-      border: e.currentTarget.getAttribute('data-border') === 'true' || this.props.border || false,
-      extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || ''
+      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 || '',
+      countTransform: e.currentTarget.getAttribute('data-count-transform')
+        ? e.currentTarget.getAttribute('data-count-transform') === 'true'
+        : (this.props.countTransform != null ? this.props.countTransform : true)
     }, () => {
       this.addScrollListener(e)
       this.updateTooltip(e)
@@ -286,10 +294,10 @@ class ReactTooltip extends Component {
 
   // Calculation the position
   updatePosition () {
-    const {currentEvent, currentTarget, place, effect, offset} = this.state
+    const {currentEvent, currentTarget, place, effect, offset, countTransform} = this.state
     const node = ReactDOM.findDOMNode(this)
 
-    const result = getPosition(currentEvent, currentTarget, node, place, effect, offset)
+    const result = getPosition(currentEvent, currentTarget, node, place, effect, offset, countTransform)
 
     if (result.isNewState) {
       // Switch to reverse placement

src/utils/getPosition.js

@@ -14,7 +14,7 @@
  * - `newState` {Object}
  * - `position` {OBject} {left: {Number}, top: {Number}}
  */
-export default function (e, target, node, place, effect, offset) {
+export default function (e, target, node, place, effect, offset, countTransform) {
   const tipWidth = node.clientWidth
   const tipHeight = node.clientHeight
   const {mouseX, mouseY} = getCurrentOffset(e, target, effect)
@@ -24,7 +24,7 @@ export default function (e, target, node, place, effect, offset) {
   const windowWidth = window.innerWidth
   const windowHeight = window.innerHeight
 
-  const {parentTop, parentLeft} = getParent(target)
+  const {parentTop, parentLeft} = countTransform && getParent(target, countTransform) || {parentTop: 0, parentLeft: 0}
 
   // Get the edge offset of the tooltip
   const getTipOffsetLeft = (place) => {