Skip to content

Commit 539d645

Browse files
joefitterjoefitter
committed
added jQuery object option support - will read data-attributes
1 parent e74455d commit 539d645

File tree

1 file changed

+58
-28
lines changed

1 file changed

+58
-28
lines changed

‎src/backbone-tooltip.amd.js

Lines changed: 58 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,29 @@ define([
88
borderWidth: 2,
99
arrowSize: 10,
1010
initialize: function(options) {
11-
this.options = options || {};
11+
if(options instanceof jQuery){
12+
this.options = this.parseDataAttributes(options);
13+
} else {
14+
this.options = options || {};
15+
}
16+
if(!this.options.$el){
17+
throw new Error('Tooltip needs a target element');
18+
return;
19+
}
20+
this.options.speed = this.options.speed === undefined ? 200 : parseInt(this.options.speed, 10);
1221
var self = this,
13-
currentTooltip = this.options.target.data('activeTooltip');
22+
currentTooltip = this.options.$el.data('activeTooltip');
1423
if(currentTooltip){
1524
if(currentTooltip.options.interrupt) {
1625
return;
1726
}
1827
currentTooltip.destroy();
1928
}
20-
this.options.target.data('activeTooltip', this);
29+
this.options.$el.data('activeTooltip', this);
2130
this.id = this.options.id || null;
2231

23-
this.elemWidth = this.options.target.outerWidth();
24-
this.elemHeight = this.options.target.outerHeight();
32+
this.elemWidth = this.options.$el.outerWidth();
33+
this.elemHeight = this.options.$el.outerHeight();
2534

2635
this.options.rootElem = this.options.rootElem || $('body');
2736
this.options.moveUp = this.options.moveUp || 0;
@@ -32,9 +41,23 @@ define([
3241
} else {
3342
this.enterHandler = _.bind(this.show, this);
3443
this.exitHandler = _.bind(this.hide, this);
35-
this.options.target.bind(this.options.trigger, this.enterHandler);
44+
this.options.$el.bind(this.options.trigger, this.enterHandler);
3645
}
3746
},
47+
parseDataAttributes: function($el){
48+
var ops = {};
49+
ops.$el = $el;
50+
ops.align = $el.attr('data-align');
51+
ops.context = $el.attr('data-context');
52+
ops.text = $el.attr('data-tooltip');
53+
ops.timeout = $el.attr('data-timeout');
54+
ops.interrupt = $el.attr('data-interrupt');
55+
ops.trigger = $el.attr('data-trigger');
56+
ops.exit = $el.attr('data-exit');
57+
ops.feedback = $el.attr('data-feedback');
58+
ops.speed = $el.attr('data-speed');
59+
return ops;
60+
},
3861
events: {
3962
'click button.tooltip-confirm': 'confirmTooltip',
4063
'click button.tooltip-deny': 'exit'
@@ -44,19 +67,20 @@ define([
4467
return false;
4568
},
4669
show: function(){
47-
this.$el.stop().fadeIn(200);
70+
this.$el.stop().fadeIn(this.options.speed);
4871
if(this.options.trigger){
49-
this.options.target.unbind(this.options.trigger, this.enterHandler);
50-
this.options.target.bind(this.options.exit, this.exitHandler);
72+
this.options.$el.unbind(this.options.trigger, this.enterHandler);
73+
this.options.$el.bind(this.options.exit, this.exitHandler);
5174
}
5275
},
5376
addEvents: function() {
77+
var self = this;
5478
this.clickHandler = _.bind(this.clicked, this);
5579
this.keypressHandler = _.bind(this.keypressed, this);
5680
$(window).bind('mousedown', this.clickHandler);
5781
$(window).bind('keydown', this.keypressHandler);
5882
if (this.options.hoverTrigger) {
59-
this.options.target.on('mouseleave', function(e) {
83+
this.options.$el.on('mouseleave', function(e) {
6084
self.mouseLeaveHandler(e);
6185
});
6286
this.$el.on('mouseleave', function(e) {
@@ -68,24 +92,31 @@ define([
6892
return $(this).data('activeTooltip') !== undefined;
6993
});
7094
elems.each(function(i, item) {
71-
if (item !== self.options.target.get(0)) {
72-
if ($(item).data('activeTooltip')) {
73-
$(item).data('activeTooltip').exit();
95+
if (item !== self.options.$el.get(0)) {
96+
var ttip;
97+
if (ttip = $(item).data('activeTooltip')) {
98+
if(ttip.options.trigger){
99+
if(ttip.$el.is(':visible')){
100+
ttip.hide();
101+
}
102+
} else {
103+
ttip.exit();
104+
}
74105
}
75106
}
76107
});
77108
}
78109
},
79110
clicked: function(e) {
80-
var isTargetElem = this.options.target.get(0) === $(e.target).get(0) || this.options.target.find($(e.target)).length > 0,
111+
var isTargetElem = this.options.$el.get(0) === $(e.target).get(0) || this.options.$el.find($(e.target)).length > 0,
81112
isTooltip = $(e.target).hasClass('tooltip') || $(e.target).parents('.tooltip').length > 0 || false;
82113
if (!isTargetElem && !isTooltip) {
83114
this.exit();
84115
}
85116
},
86117
mouseLeaveHandler: function(e) {
87118
var isTooltip = $(e.toElement).get(0) === this.$el.get(0) || this.$el.find($(e.toElement)).length > 0 || false,
88-
isTargetElem = this.options.target.get(0) === $(e.toElement).get(0) || this.options.target.find($(e.toElement)).length > 0 || false;
119+
isTargetElem = this.options.$el.get(0) === $(e.toElement).get(0) || this.options.$el.find($(e.toElement)).length > 0 || false;
89120
if (!isTargetElem && !isTooltip) {
90121
this.exit();
91122
}
@@ -101,8 +132,8 @@ define([
101132
<span><%= options.text %></span>\
102133
<% if(options.feedback) { %>\
103134
<div class="feedback-buttons">\
104-
<button class="btn btn-secondary tooltip-confirm">Yes</button>\
105-
<button class="btn btn-secondary tooltip-deny">No</button>\
135+
<button class="btn btn-primary tooltip-confirm">Yes</button>\
136+
<button class="btn btn-primary tooltip-deny">No</button>\
106137
</div>\
107138
<% } %>')(this));
108139
this.options.rootElem.append(this.el);
@@ -125,7 +156,7 @@ define([
125156
positionSelf: function() {
126157
var rootElemOffset = this.options.rootElem.offset(),
127158
scrollTop = this.options.rootElem.prop('tagName') === "BODY" ? 0 : this.options.rootElem.get(0).scrollTop,
128-
pos = this.options.target.offset();
159+
pos = this.options.$el.offset();
129160
pos.top = pos.top - rootElemOffset.top + scrollTop;
130161
pos.left = pos.left - rootElemOffset.left;
131162
switch (this.options.align) {
@@ -153,28 +184,27 @@ define([
153184
},
154185
exit: function() {
155186
var self = this;
156-
this.$el.fadeOut(200, function() {
187+
this.$el.fadeOut(this.options.speed, function() {
157188
self.destroy();
158189
});
159190
return false;
160191
},
161192
hide: function(){
162-
console.log('bye');
163-
this.$el.stop().fadeOut(200);
193+
this.$el.stop().fadeOut(this.options.speed);
164194
if(this.options.trigger){
165-
this.options.target.unbind(this.options.exit, this.exitHandler);
166-
this.options.target.bind(this.options.trigger, this.enterHandler);
195+
this.options.$el.unbind(this.options.exit, this.exitHandler);
196+
this.options.$el.bind(this.options.trigger, this.enterHandler);
167197
}
168198
},
169199
destroy: function() {
170200
this.undelegateEvents();
171-
this.options.target.data('activeTooltip', null);
201+
this.options.$el.data('activeTooltip', null);
172202
$(window).unbind('click', this.clickHandler);
173203
$(window).unbind('keydown', this.keypressHandler);
174-
this.options.target.off('mouseleave');
204+
this.options.$el.off('mouseleave');
175205
if(this.options.trigger){
176-
this.options.target.unbind(this.options.exit, this.exitHandler);
177-
this.options.target.unbind(this.options.trigger, this.enterHandler);
206+
this.options.$el.unbind(this.options.exit, this.exitHandler);
207+
this.options.$el.unbind(this.options.trigger, this.enterHandler);
178208
}
179209
this.$el.off('mouseleave');
180210
this.$el.removeData().unbind();
@@ -183,7 +213,7 @@ define([
183213
},
184214
addClasses: function() {
185215
var type, align;
186-
switch (this.options.type) {
216+
switch (this.options.context) {
187217
case 'info':
188218
type = 'info';
189219
break;

0 commit comments

Comments
 (0)