Skip to content

Commit 93f0bd2

Browse files
committed
Merge pull request #112 from wwayne/eventOff
Add custom event to hide tooltip
2 parents 43a037c + 1ec38fb commit 93f0bd2

File tree

7 files changed

+67
-80
lines changed

7 files changed

+67
-80
lines changed

Diff for: README.md

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ Check example: [React-tooltip Test](http://wwayne.com/react-tooltip)
5151
type | data-type | String | success, warning, error, info, light | tooltip's color theme
5252
effect | data-effect | String | float, solid | either float or pinned
5353
event | data-event | String | e.g. click | custom event to trigger tooltip
54+
eventOff | data-event-off | String | e.g. click | custom event to hide tooltip
5455
isCapture | data-iscapture | Bool | true, false | when set to ture, custom event's propagation mode will be capture, default is false, `<p data-tip="tooltip" data-event='click' data-iscapture='true'></p>` or `<ReactTooltip isCapture={true} />` |
5556
offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global
5657
multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline

Diff for: dist/react-tooltip.js

+14-17
Original file line numberDiff line numberDiff line change
@@ -171,25 +171,22 @@ var ReactTooltip = function (_Component) {
171171
value: function bindListener() {
172172
var targetArray = this.getTargetArray();
173173

174-
var dataEvent = void 0;
175-
var dataEventOff = void 0;
174+
var dataEvent = undefined;
175+
var dataEventOff = undefined;
176176
for (var i = 0; i < targetArray.length; i++) {
177177
if (targetArray[i].getAttribute('currentItem') === null) {
178178
targetArray[i].setAttribute('currentItem', 'false');
179179
}
180180
dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
181181
if (dataEvent) {
182-
dataEventOff = this.state.eventOff || targetArray[i].getAttribute('data-event-off');
183182
// if off event is specified, we will show tip on data-event and hide it on data-event-off
184-
if (dataEventOff) {
185-
targetArray[i].removeEventListener(dataEvent, this.showTooltip);
186-
targetArray[i].addEventListener(dataEvent, this.showTooltip, false);
183+
dataEventOff = this.state.eventOff || targetArray[i].getAttribute('data-event-off');
187184

185+
targetArray[i].removeEventListener(dataEvent, this.checkStatus);
186+
targetArray[i].addEventListener(dataEvent, this.checkStatus, false);
187+
if (dataEventOff) {
188188
targetArray[i].removeEventListener(dataEventOff, this.hideTooltip);
189189
targetArray[i].addEventListener(dataEventOff, this.hideTooltip, false);
190-
} else {
191-
targetArray[i].removeEventListener(dataEvent, this.checkStatus);
192-
targetArray[i].addEventListener(dataEvent, this.checkStatus, false);
193190
}
194191
} else {
195192
targetArray[i].removeEventListener('mouseenter', this.showTooltip);
@@ -209,7 +206,7 @@ var ReactTooltip = function (_Component) {
209206
key: 'unbindListener',
210207
value: function unbindListener() {
211208
var targetArray = document.querySelectorAll('[data-tip]');
212-
var dataEvent = void 0;
209+
var dataEvent = undefined;
213210

214211
for (var i = 0; i < targetArray.length; i++) {
215212
dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
@@ -232,7 +229,7 @@ var ReactTooltip = function (_Component) {
232229
value: function getTargetArray() {
233230
var id = this.props.id;
234231

235-
var targetArray = void 0;
232+
var targetArray = undefined;
236233

237234
if (id === undefined) {
238235
targetArray = document.querySelectorAll('[data-tip]:not([data-for])');
@@ -281,7 +278,7 @@ var ReactTooltip = function (_Component) {
281278
value: function checkStatus(e) {
282279
var show = this.state.show;
283280

284-
var isCapture = void 0;
281+
var isCapture = undefined;
285282

286283
if (e.currentTarget.getAttribute('data-iscapture')) {
287284
isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true';
@@ -332,7 +329,7 @@ var ReactTooltip = function (_Component) {
332329
/* Detect multiline */
333330
var regexp = /<br\s*\/?>/;
334331
var multiline = e.currentTarget.getAttribute('data-multiline') ? e.currentTarget.getAttribute('data-multiline') : this.props.multiline ? this.props.multiline : false;
335-
var tooltipText = void 0;
332+
var tooltipText = undefined;
336333
var multilineCount = 0;
337334
if (!multiline || multiline === 'false' || !regexp.test(originTooltip)) {
338335
tooltipText = originTooltip;
@@ -467,8 +464,8 @@ var ReactTooltip = function (_Component) {
467464
var targetHeight = currentTarget.clientHeight;
468465
var windoWidth = window.innerWidth;
469466
var windowHeight = window.innerHeight;
470-
var x = void 0;
471-
var y = void 0;
467+
var x = undefined;
468+
var y = undefined;
472469
var defaultTopY = targetTop - tipHeight - 8;
473470
var defaultBottomY = targetTop + targetHeight + 8;
474471
var defaultLeftX = targetLeft - tipWidth - 6;
@@ -740,8 +737,8 @@ var ReactTooltip = function (_Component) {
740737
}
741738
firstCount++;
742739
}
743-
for (var _i = string.length - 1; _i >= 0; _i--) {
744-
if (string[_i] !== ' ') {
740+
for (var i = string.length - 1; i >= 0; i--) {
741+
if (string[i] !== ' ') {
745742
break;
746743
}
747744
lastCount++;

Diff for: dist/react-tooltip.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-tooltip",
3-
"version": "2.0.2",
3+
"version": "2.0.3",
44
"description": "react tooltip component",
55
"main": "index.js",
66
"scripts": {

Diff for: src/index.js

+4-7
Original file line numberDiff line numberDiff line change
@@ -126,17 +126,14 @@ class ReactTooltip extends Component {
126126
}
127127
dataEvent = this.state.event || targetArray[i].getAttribute('data-event')
128128
if (dataEvent) {
129-
dataEventOff = this.state.eventOff || targetArray[i].getAttribute('data-event-off')
130129
// if off event is specified, we will show tip on data-event and hide it on data-event-off
131-
if (dataEventOff) {
132-
targetArray[i].removeEventListener(dataEvent, this.showTooltip)
133-
targetArray[i].addEventListener(dataEvent, this.showTooltip, false)
130+
dataEventOff = this.state.eventOff || targetArray[i].getAttribute('data-event-off')
134131

132+
targetArray[i].removeEventListener(dataEvent, this.checkStatus)
133+
targetArray[i].addEventListener(dataEvent, this.checkStatus, false)
134+
if (dataEventOff) {
135135
targetArray[i].removeEventListener(dataEventOff, this.hideTooltip)
136136
targetArray[i].addEventListener(dataEventOff, this.hideTooltip, false)
137-
} else {
138-
targetArray[i].removeEventListener(dataEvent, this.checkStatus)
139-
targetArray[i].addEventListener(dataEvent, this.checkStatus, false)
140137
}
141138
} else {
142139
targetArray[i].removeEventListener('mouseenter', this.showTooltip)

Diff for: standalone/react-tooltip.js

+45-53
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,47 @@
11
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ReactTooltip = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
22
/*!
3-
Copyright (c) 2016 Jed Watson.
3+
Copyright (c) 2015 Jed Watson.
44
Licensed under the MIT License (MIT), see
55
http://jedwatson.github.io/classnames
66
*/
7-
/* global define */
87

9-
(function () {
10-
'use strict';
8+
function classNames() {
9+
var classes = '';
10+
var arg;
1111

12-
var hasOwn = {}.hasOwnProperty;
13-
14-
function classNames () {
15-
var classes = [];
16-
17-
for (var i = 0; i < arguments.length; i++) {
18-
var arg = arguments[i];
19-
if (!arg) continue;
20-
21-
var argType = typeof arg;
12+
for (var i = 0; i < arguments.length; i++) {
13+
arg = arguments[i];
14+
if (!arg) {
15+
continue;
16+
}
2217

23-
if (argType === 'string' || argType === 'number') {
24-
classes.push(arg);
25-
} else if (Array.isArray(arg)) {
26-
classes.push(classNames.apply(null, arg));
27-
} else if (argType === 'object') {
28-
for (var key in arg) {
29-
if (hasOwn.call(arg, key) && arg[key]) {
30-
classes.push(key);
31-
}
18+
if ('string' === typeof arg || 'number' === typeof arg) {
19+
classes += ' ' + arg;
20+
} else if (Object.prototype.toString.call(arg) === '[object Array]') {
21+
classes += ' ' + classNames.apply(null, arg);
22+
} else if ('object' === typeof arg) {
23+
for (var key in arg) {
24+
if (!arg.hasOwnProperty(key) || !arg[key]) {
25+
continue;
3226
}
27+
classes += ' ' + key;
3328
}
3429
}
35-
36-
return classes.join(' ');
3730
}
31+
return classes.substr(1);
32+
}
3833

39-
if (typeof module !== 'undefined' && module.exports) {
40-
module.exports = classNames;
41-
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
42-
// register as 'classnames', consistent with npm package name
43-
define('classnames', [], function () {
44-
return classNames;
45-
});
46-
} else {
47-
window.classNames = classNames;
48-
}
49-
}());
34+
// safely export classNames for node / browserify
35+
if (typeof module !== 'undefined' && module.exports) {
36+
module.exports = classNames;
37+
}
38+
39+
// safely export classNames for RequireJS
40+
if (typeof define !== 'undefined' && define.amd) {
41+
define('classnames', [], function() {
42+
return classNames;
43+
});
44+
}
5045

5146
},{}],2:[function(require,module,exports){
5247
(function (global){
@@ -223,25 +218,22 @@ var ReactTooltip = function (_Component) {
223218
value: function bindListener() {
224219
var targetArray = this.getTargetArray();
225220

226-
var dataEvent = void 0;
227-
var dataEventOff = void 0;
221+
var dataEvent = undefined;
222+
var dataEventOff = undefined;
228223
for (var i = 0; i < targetArray.length; i++) {
229224
if (targetArray[i].getAttribute('currentItem') === null) {
230225
targetArray[i].setAttribute('currentItem', 'false');
231226
}
232227
dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
233228
if (dataEvent) {
234-
dataEventOff = this.state.eventOff || targetArray[i].getAttribute('data-event-off');
235229
// if off event is specified, we will show tip on data-event and hide it on data-event-off
236-
if (dataEventOff) {
237-
targetArray[i].removeEventListener(dataEvent, this.showTooltip);
238-
targetArray[i].addEventListener(dataEvent, this.showTooltip, false);
230+
dataEventOff = this.state.eventOff || targetArray[i].getAttribute('data-event-off');
239231

232+
targetArray[i].removeEventListener(dataEvent, this.checkStatus);
233+
targetArray[i].addEventListener(dataEvent, this.checkStatus, false);
234+
if (dataEventOff) {
240235
targetArray[i].removeEventListener(dataEventOff, this.hideTooltip);
241236
targetArray[i].addEventListener(dataEventOff, this.hideTooltip, false);
242-
} else {
243-
targetArray[i].removeEventListener(dataEvent, this.checkStatus);
244-
targetArray[i].addEventListener(dataEvent, this.checkStatus, false);
245237
}
246238
} else {
247239
targetArray[i].removeEventListener('mouseenter', this.showTooltip);
@@ -261,7 +253,7 @@ var ReactTooltip = function (_Component) {
261253
key: 'unbindListener',
262254
value: function unbindListener() {
263255
var targetArray = document.querySelectorAll('[data-tip]');
264-
var dataEvent = void 0;
256+
var dataEvent = undefined;
265257

266258
for (var i = 0; i < targetArray.length; i++) {
267259
dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
@@ -284,7 +276,7 @@ var ReactTooltip = function (_Component) {
284276
value: function getTargetArray() {
285277
var id = this.props.id;
286278

287-
var targetArray = void 0;
279+
var targetArray = undefined;
288280

289281
if (id === undefined) {
290282
targetArray = document.querySelectorAll('[data-tip]:not([data-for])');
@@ -333,7 +325,7 @@ var ReactTooltip = function (_Component) {
333325
value: function checkStatus(e) {
334326
var show = this.state.show;
335327

336-
var isCapture = void 0;
328+
var isCapture = undefined;
337329

338330
if (e.currentTarget.getAttribute('data-iscapture')) {
339331
isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true';
@@ -384,7 +376,7 @@ var ReactTooltip = function (_Component) {
384376
/* Detect multiline */
385377
var regexp = /<br\s*\/?>/;
386378
var multiline = e.currentTarget.getAttribute('data-multiline') ? e.currentTarget.getAttribute('data-multiline') : this.props.multiline ? this.props.multiline : false;
387-
var tooltipText = void 0;
379+
var tooltipText = undefined;
388380
var multilineCount = 0;
389381
if (!multiline || multiline === 'false' || !regexp.test(originTooltip)) {
390382
tooltipText = originTooltip;
@@ -519,8 +511,8 @@ var ReactTooltip = function (_Component) {
519511
var targetHeight = currentTarget.clientHeight;
520512
var windoWidth = window.innerWidth;
521513
var windowHeight = window.innerHeight;
522-
var x = void 0;
523-
var y = void 0;
514+
var x = undefined;
515+
var y = undefined;
524516
var defaultTopY = targetTop - tipHeight - 8;
525517
var defaultBottomY = targetTop + targetHeight + 8;
526518
var defaultLeftX = targetLeft - tipWidth - 6;
@@ -792,8 +784,8 @@ var ReactTooltip = function (_Component) {
792784
}
793785
firstCount++;
794786
}
795-
for (var _i = string.length - 1; _i >= 0; _i--) {
796-
if (string[_i] !== ' ') {
787+
for (var i = string.length - 1; i >= 0; i--) {
788+
if (string[i] !== ' ') {
797789
break;
798790
}
799791
lastCount++;

Diff for: standalone/react-tooltip.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)