Skip to content

Commit 20b563b

Browse files
wwaynewwayne
committed
Add countTransform attribute #142 
1 parent ed2a99e commit 20b563b

File tree

4 files changed

+27
-18
lines changed

4 files changed

+27
-18
lines changed

Diff for: ‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ class | data-class | String | | extra custom class, can use !important to
6262
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
6363
border | data-border | Bool | true, false | Add one pixel white border
6464
getContent | null | Func or Array | () => {}, [() => {}, Interval] | Generate the tip content dynamically
65+
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
6566

6667
## Using react component as tooltip
6768
Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)

Diff for: ‎example/src/index.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -147,24 +147,24 @@ const Test = React.createClass({
147147

148148
<section className="advance">
149149
<div className="section">
150-
<h4 className='title'>Customer event</h4>
150+
<h4 className='title'>Custom event</h4>
151151
<p className="sub-title"></p>
152152

153153
<div className="example-jsx">
154154
<div className="side">
155-
<a data-for='customer-event' data-tip='customer show' data-event='click focus'>( •̀д•́)</a>
156-
<ReactTooltip id='customer-event' globalEventOff='click'/>
155+
<a data-for='custom-event' data-tip='custom show' data-event='click focus'>( •̀д•́)</a>
156+
<ReactTooltip id='custom-event' globalEventOff='click'/>
157157
</div>
158158

159159
<div className="side">
160-
<a data-for='customer-off-event' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
161-
<ReactTooltip id='customer-off-event'/>
160+
<a data-for='custom-off-event' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
161+
<ReactTooltip id='custom-off-event'/>
162162
</div>
163163
</div>
164164
<br />
165165
<pre className='example-pre'>
166166
<div>
167-
<p>{"<a data-tip='customer show' data-event='click focus'>( •̀д•́)</a>\n" +
167+
<p>{"<a data-tip='custom show' data-event='click focus'>( •̀д•́)</a>\n" +
168168
"<ReactTooltip globalEventOff='click' />"}</p>
169169
</div>
170170
<div>
@@ -180,13 +180,13 @@ const Test = React.createClass({
180180

181181
<div className="example-jsx">
182182
<div className="side">
183-
<a data-for='customer-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
184-
<ReactTooltip id='customer-class' class='extraClass' delayHide={1000} effect='solid'/>
183+
<a data-for='custom-class' data-tip='hover on me will keep the tootlip'>(･ω´･ )</a>
184+
<ReactTooltip id='custom-class' class='extraClass' delayHide={1000} effect='solid'/>
185185
</div>
186186

187187
<div className="side">
188-
<a data-for='customer-theme' data-tip='custom theme'>(･ω´･ )</a>
189-
<ReactTooltip id='customer-theme' class='customeTheme'/>
188+
<a data-for='custom-theme' data-tip='custom theme'>(･ω´･ )</a>
189+
<ReactTooltip id='custom-theme' class='customeTheme'/>
190190
</div>
191191
</div>
192192
<br />

Diff for: ‎src/index.js

+14-6
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ class ReactTooltip extends Component {
3838
watchWindow: PropTypes.bool,
3939
isCapture: PropTypes.bool,
4040
globalEventOff: PropTypes.string,
41-
getContent: PropTypes.any
41+
getContent: PropTypes.any,
42+
countTransform: PropTypes.bool
4243
}
4344

4445
constructor (props) {
@@ -208,11 +209,18 @@ class ReactTooltip extends Component {
208209
type: e.currentTarget.getAttribute('data-type') || this.props.type || 'dark',
209210
effect: isFocus && 'solid' || e.currentTarget.getAttribute('data-effect') || this.props.effect || 'float',
210211
offset: e.currentTarget.getAttribute('data-offset') || this.props.offset || {},
211-
html: e.currentTarget.getAttribute('data-html') === 'true' || this.props.html || false,
212+
html: e.currentTarget.getAttribute('data-html')
213+
? e.currentTarget.getAttribute('data-html') === 'true'
214+
: (this.props.html || false),
212215
delayShow: e.currentTarget.getAttribute('data-delay-show') || this.props.delayShow || 0,
213216
delayHide: e.currentTarget.getAttribute('data-delay-hide') || this.props.delayHide || 0,
214-
border: e.currentTarget.getAttribute('data-border') === 'true' || this.props.border || false,
215-
extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || ''
217+
border: e.currentTarget.getAttribute('data-border')
218+
? e.currentTarget.getAttribute('data-border') === 'true'
219+
: (this.props.border || false),
220+
extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || '',
221+
countTransform: e.currentTarget.getAttribute('data-count-transform')
222+
? e.currentTarget.getAttribute('data-count-transform') === 'true'
223+
: (this.props.countTransform != null ? this.props.countTransform : true)
216224
}, () => {
217225
this.addScrollListener(e)
218226
this.updateTooltip(e)
@@ -286,10 +294,10 @@ class ReactTooltip extends Component {
286294

287295
// Calculation the position
288296
updatePosition () {
289-
const {currentEvent, currentTarget, place, effect, offset} = this.state
297+
const {currentEvent, currentTarget, place, effect, offset, countTransform} = this.state
290298
const node = ReactDOM.findDOMNode(this)
291299

292-
const result = getPosition(currentEvent, currentTarget, node, place, effect, offset)
300+
const result = getPosition(currentEvent, currentTarget, node, place, effect, offset, countTransform)
293301

294302
if (result.isNewState) {
295303
// Switch to reverse placement

Diff for: ‎src/utils/getPosition.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* - `newState` {Object}
1515
* - `position` {OBject} {left: {Number}, top: {Number}}
1616
*/
17-
export default function (e, target, node, place, effect, offset) {
17+
export default function (e, target, node, place, effect, offset, countTransform) {
1818
const tipWidth = node.clientWidth
1919
const tipHeight = node.clientHeight
2020
const {mouseX, mouseY} = getCurrentOffset(e, target, effect)
@@ -24,7 +24,7 @@ export default function (e, target, node, place, effect, offset) {
2424
const windowWidth = window.innerWidth
2525
const windowHeight = window.innerHeight
2626

27-
const {parentTop, parentLeft} = getParent(target)
27+
const {parentTop, parentLeft} = countTransform && getParent(target, countTransform) || {parentTop: 0, parentLeft: 0}
2828

2929
// Get the edge offset of the tooltip
3030
const getTipOffsetLeft = (place) => {

0 commit comments

Comments
 (0)