@@ -61,12 +61,29 @@ class ReactTooltip extends Component {
61
61
currentTarget : null // Current target of mouse event
62
62
}
63
63
64
+ this . bind ( [
65
+ 'showTooltip' ,
66
+ 'updateTooltip' ,
67
+ 'hideTooltip' ,
68
+ 'globalRebuild' ,
69
+ 'onWindowResize'
70
+ ] )
71
+
64
72
this . mount = true
65
73
this . delayShowLoop = null
66
74
this . delayHideLoop = null
67
75
this . intervalUpdateContent = null
68
76
}
69
77
78
+ /**
79
+ * For unify the bind and unbind listener
80
+ */
81
+ bind ( methodArray ) {
82
+ methodArray . forEach ( method => {
83
+ this [ method ] = this [ method ] . bind ( this )
84
+ } )
85
+ }
86
+
70
87
componentDidMount ( ) {
71
88
this . setStyleHeader ( ) // Set the style to the <link>
72
89
this . bindListener ( ) // Bind listener for tooltip
@@ -115,27 +132,24 @@ class ReactTooltip extends Component {
115
132
if ( target . getAttribute ( 'currentItem' ) === null ) {
116
133
target . setAttribute ( 'currentItem' , 'false' )
117
134
}
135
+ this . unbindBasicListener ( target )
118
136
119
137
if ( this . isCustomEvent ( target ) ) {
120
138
this . customBindListener ( target )
121
139
return
122
140
}
123
141
124
- target . removeEventListener ( 'mouseenter' , this . showTooltip )
125
- target . addEventListener ( 'mouseenter' , ::this . showTooltip , isCaptureMode )
142
+ target . addEventListener ( 'mouseenter' , this . showTooltip , isCaptureMode )
126
143
if ( this . state . effect === 'float' ) {
127
- target . removeEventListener ( 'mousemove' , this . updateTooltip )
128
- target . addEventListener ( 'mousemove' , ::this . updateTooltip , isCaptureMode )
144
+ target . addEventListener ( 'mousemove' , this . updateTooltip , isCaptureMode )
129
145
}
130
-
131
- target . removeEventListener ( 'mouseleave' , this . hideTooltip )
132
- target . addEventListener ( 'mouseleave' , ::this . hideTooltip , isCaptureMode )
146
+ target . addEventListener ( 'mouseleave' , this . hideTooltip , isCaptureMode )
133
147
} )
134
148
135
149
// Global event to hide tooltip
136
150
if ( globalEventOff ) {
137
151
window . removeEventListener ( globalEventOff , this . hideTooltip )
138
- window . addEventListener ( globalEventOff , :: this . hideTooltip , false )
152
+ window . addEventListener ( globalEventOff , this . hideTooltip , false )
139
153
}
140
154
}
141
155
@@ -145,21 +159,25 @@ class ReactTooltip extends Component {
145
159
unbindListener ( ) {
146
160
const { id, globalEventOff} = this . props
147
161
const targetArray = this . getTargetArray ( id )
148
-
149
162
targetArray . forEach ( target => {
150
- if ( this . isCustomEvent ( target ) ) {
151
- this . customUnbindListener ( target )
152
- return
153
- }
154
-
155
- target . removeEventListener ( 'mouseenter' , this . showTooltip )
156
- target . removeEventListener ( 'mousemove' , this . updateTooltip )
157
- target . removeEventListener ( 'mouseleave' , this . hideTooltip )
163
+ this . unbindBasicListener ( target )
164
+ if ( this . isCustomEvent ( target ) ) this . customUnbindListener ( target )
158
165
} )
159
166
160
167
if ( globalEventOff ) window . removeEventListener ( globalEventOff , this . hideTooltip )
161
168
}
162
169
170
+ /**
171
+ * Invoke this before bind listener and ummount the compont
172
+ * it is necessary to invloke this even when binding custom event
173
+ * so that the tooltip can switch between custom and default listener
174
+ */
175
+ unbindBasicListener ( target ) {
176
+ target . removeEventListener ( 'mouseenter' , this . showTooltip )
177
+ target . removeEventListener ( 'mousemove' , this . updateTooltip )
178
+ target . removeEventListener ( 'mouseleave' , this . hideTooltip )
179
+ }
180
+
163
181
/**
164
182
* When mouse enter, show the tooltip
165
183
*/
@@ -170,6 +188,7 @@ class ReactTooltip extends Component {
170
188
const originTooltip = e . currentTarget . getAttribute ( 'data-tip' )
171
189
const isMultiline = e . currentTarget . getAttribute ( 'data-multiline' ) || multiline || false
172
190
191
+ // Generate tootlip content
173
192
let content = children
174
193
if ( getContent ) {
175
194
if ( Array . isArray ( getContent ) ) {
@@ -178,14 +197,16 @@ class ReactTooltip extends Component {
178
197
content = getContent ( )
179
198
}
180
199
}
181
-
182
200
const placeholder = getTipContent ( originTooltip , content , isMultiline )
183
201
202
+ // If e is instance of FocusEvent, switch to `solid` effect
203
+ const isFocus = e instanceof FocusEvent
204
+
184
205
this . setState ( {
185
206
placeholder,
186
207
place : e . currentTarget . getAttribute ( 'data-place' ) || this . props . place || 'top' ,
187
208
type : e . currentTarget . getAttribute ( 'data-type' ) || this . props . type || 'dark' ,
188
- effect : e . currentTarget . getAttribute ( 'data-effect' ) || this . props . effect || 'float' ,
209
+ effect : isFocus && 'solid' || e . currentTarget . getAttribute ( 'data-effect' ) || this . props . effect || 'float' ,
189
210
offset : e . currentTarget . getAttribute ( 'data-offset' ) || this . props . offset || { } ,
190
211
html : e . currentTarget . getAttribute ( 'data-html' ) === 'true' || this . props . html || false ,
191
212
delayShow : e . currentTarget . getAttribute ( 'data-delay-show' ) || this . props . delayShow || 0 ,
@@ -255,7 +276,7 @@ class ReactTooltip extends Component {
255
276
*/
256
277
addScrollListener ( e ) {
257
278
const isCaptureMode = this . isCapture ( e . currentTarget )
258
- window . addEventListener ( 'scroll' , :: this . hideTooltip , isCaptureMode )
279
+ window . addEventListener ( 'scroll' , this . hideTooltip , isCaptureMode )
259
280
}
260
281
261
282
removeScrollListener ( ) {
0 commit comments