jquery-qtip2-rails 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,21 +1,27 @@
1
1
  /* Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
2
- .ui-tooltip-shadow{
2
+ .qtip-shadow{
3
3
  -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
4
4
  -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
5
5
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
6
6
  }
7
7
 
8
8
  /* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
9
- .ui-tooltip-rounded,
10
- .ui-tooltip-tipsy,
11
- .ui-tooltip-bootstrap{
9
+ .qtip-rounded,
10
+ .qtip-tipsy,
11
+ .qtip-bootstrap{
12
12
  -moz-border-radius: 5px;
13
13
  -webkit-border-radius: 5px;
14
14
  border-radius: 5px;
15
15
  }
16
16
 
17
+ .qtip-rounded .qtip-titlebar{
18
+ -moz-border-radius: 5px 5px 0 0;
19
+ -webkit-border-radius: 5px 5px 0 0;
20
+ border-radius: 5px 5px 0 0;
21
+ }
22
+
17
23
  /* Youtube tooltip style */
18
- .ui-tooltip-youtube{
24
+ .qtip-youtube{
19
25
  -moz-border-radius: 2px;
20
26
  -webkit-border-radius: 2px;
21
27
  border-radius: 2px;
@@ -35,12 +41,12 @@
35
41
  background-image: -o-linear-gradient(top,#4A4A4A 0,black 100%);
36
42
  }
37
43
 
38
- .ui-tooltip-youtube .ui-tooltip-titlebar{
44
+ .qtip-youtube .qtip-titlebar{
39
45
  background-color: #4A4A4A;
40
46
  background-color: rgba(0,0,0,0);
41
47
  }
42
48
 
43
- .ui-tooltip-youtube .ui-tooltip-content{
49
+ .qtip-youtube .qtip-content{
44
50
  padding: .75em;
45
51
  font: 12px arial,sans-serif;
46
52
 
@@ -48,17 +54,17 @@
48
54
  -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);";
49
55
  }
50
56
 
51
- .ui-tooltip-youtube .ui-tooltip-icon{
57
+ .qtip-youtube .qtip-icon{
52
58
  border-color: #222;
53
59
  }
54
60
 
55
- .ui-tooltip-youtube .ui-tooltip-titlebar .ui-state-hover{
61
+ .qtip-youtube .qtip-titlebar .ui-state-hover{
56
62
  border-color: #303030;
57
63
  }
58
64
 
59
65
 
60
66
  /* jQuery TOOLS Tooltip style */
61
- .ui-tooltip-jtools{
67
+ .qtip-jtools{
62
68
  background: #232323;
63
69
  background: rgba(0, 0, 0, 0.7);
64
70
  background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
@@ -80,34 +86,34 @@
80
86
  }
81
87
 
82
88
  /* IE Specific */
83
- .ui-tooltip-jtools .ui-tooltip-titlebar{
89
+ .qtip-jtools .qtip-titlebar{
84
90
  background-color: transparent;
85
91
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
86
92
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
87
93
  }
88
- .ui-tooltip-jtools .ui-tooltip-content{
94
+ .qtip-jtools .qtip-content{
89
95
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
90
96
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
91
97
  }
92
98
 
93
- .ui-tooltip-jtools .ui-tooltip-titlebar,
94
- .ui-tooltip-jtools .ui-tooltip-content{
99
+ .qtip-jtools .qtip-titlebar,
100
+ .qtip-jtools .qtip-content{
95
101
  background: transparent;
96
102
  color: white;
97
103
  border: 0 dashed transparent;
98
104
  }
99
105
 
100
- .ui-tooltip-jtools .ui-tooltip-icon{
106
+ .qtip-jtools .qtip-icon{
101
107
  border-color: #555;
102
108
  }
103
109
 
104
- .ui-tooltip-jtools .ui-tooltip-titlebar .ui-state-hover{
110
+ .qtip-jtools .qtip-titlebar .ui-state-hover{
105
111
  border-color: #333;
106
112
  }
107
113
 
108
114
 
109
115
  /* Cluetip style */
110
- .ui-tooltip-cluetip{
116
+ .qtip-cluetip{
111
117
  -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
112
118
  -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
113
119
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
@@ -117,24 +123,24 @@
117
123
  border: 0 dashed transparent;
118
124
  }
119
125
 
120
- .ui-tooltip-cluetip .ui-tooltip-titlebar{
126
+ .qtip-cluetip .qtip-titlebar{
121
127
  background-color: #87876A;
122
128
  color: white;
123
129
  border: 0 dashed transparent;
124
130
  }
125
131
 
126
- .ui-tooltip-cluetip .ui-tooltip-icon{
132
+ .qtip-cluetip .qtip-icon{
127
133
  border-color: #808064;
128
134
  }
129
135
 
130
- .ui-tooltip-cluetip .ui-tooltip-titlebar .ui-state-hover{
136
+ .qtip-cluetip .qtip-titlebar .ui-state-hover{
131
137
  border-color: #696952;
132
138
  color: #696952;
133
139
  }
134
140
 
135
141
 
136
142
  /* Tipsy style */
137
- .ui-tooltip-tipsy{
143
+ .qtip-tipsy{
138
144
  background: black;
139
145
  background: rgba(0, 0, 0, .87);
140
146
 
@@ -148,27 +154,27 @@
148
154
  text-shadow: 0 1px black;
149
155
  }
150
156
 
151
- .ui-tooltip-tipsy .ui-tooltip-titlebar{
157
+ .qtip-tipsy .qtip-titlebar{
152
158
  padding: 6px 35px 0 10;
153
159
  background-color: transparent;
154
160
  }
155
161
 
156
- .ui-tooltip-tipsy .ui-tooltip-content{
162
+ .qtip-tipsy .qtip-content{
157
163
  padding: 6px 10;
158
164
  }
159
165
 
160
- .ui-tooltip-tipsy .ui-tooltip-icon{
166
+ .qtip-tipsy .qtip-icon{
161
167
  border-color: #222;
162
168
  text-shadow: none;
163
169
  }
164
170
 
165
- .ui-tooltip-tipsy .ui-tooltip-titlebar .ui-state-hover{
171
+ .qtip-tipsy .qtip-titlebar .ui-state-hover{
166
172
  border-color: #303030;
167
173
  }
168
174
 
169
175
 
170
176
  /* Tipped style */
171
- .ui-tooltip-tipped{
177
+ .qtip-tipped{
172
178
  border: 3px solid #959FA9;
173
179
 
174
180
  -moz-border-radius: 3px;
@@ -182,7 +188,7 @@
182
188
  font-family: serif;
183
189
  }
184
190
 
185
- .ui-tooltip-tipped .ui-tooltip-titlebar{
191
+ .qtip-tipped .qtip-titlebar{
186
192
  border-bottom-width: 0;
187
193
 
188
194
  color: white;
@@ -196,12 +202,12 @@
196
202
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";
197
203
  }
198
204
 
199
- .ui-tooltip-tipped .ui-tooltip-icon{
205
+ .qtip-tipped .qtip-icon{
200
206
  border: 2px solid #285589;
201
207
  background: #285589;
202
208
  }
203
209
 
204
- .ui-tooltip-tipped .ui-tooltip-icon .ui-icon{
210
+ .qtip-tipped .qtip-icon .ui-icon{
205
211
  background-color: #FBFBFB;
206
212
  color: #555;
207
213
  }
@@ -213,7 +219,7 @@
213
219
  * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
214
220
  * Does not work with IE 7.
215
221
  */
216
- .ui-tooltip-bootstrap{
222
+ .qtip-bootstrap{
217
223
  /** Taken from Bootstrap body */
218
224
  font-size: 14px;
219
225
  line-height: 20px;
@@ -235,7 +241,7 @@
235
241
  background-clip: padding-box;
236
242
  }
237
243
 
238
- .ui-tooltip-bootstrap .ui-tooltip-titlebar{
244
+ .qtip-bootstrap .qtip-titlebar{
239
245
  /** Taken from Bootstrap .popover-title */
240
246
  padding: 8px 14px;
241
247
  margin: 0;
@@ -249,10 +255,10 @@
249
255
  border-radius: 5px 5px 0 0;
250
256
  }
251
257
 
252
- .ui-tooltip-bootstrap .ui-tooltip-titlebar .ui-state-default{
258
+ .qtip-bootstrap .qtip-titlebar .qtip-close{
253
259
  /**
254
260
  * Overrides qTip2:
255
- * .ui-tooltip-titlebar .ui-state-default{
261
+ * .qtip-titlebar .qtip-close{
256
262
  * [...]
257
263
  * right: 4px;
258
264
  * top: 50%;
@@ -265,15 +271,15 @@
265
271
  border-style: none;
266
272
  }
267
273
 
268
- .ui-tooltip-bootstrap .ui-tooltip-content{
274
+ .qtip-bootstrap .qtip-content{
269
275
  /** Taken from Bootstrap .popover-content */
270
276
  padding: 9px 14px;
271
277
  }
272
278
 
273
- .ui-tooltip-bootstrap .ui-tooltip-icon{
279
+ .qtip-bootstrap .qtip-icon{
274
280
  /**
275
281
  * Overrides qTip2:
276
- * .ui-tooltip-default .ui-tooltip-icon {
282
+ * .qtip-default .qtip-icon {
277
283
  * border-color: #CCC;
278
284
  * background: #F1F1F1;
279
285
  * color: #777;
@@ -282,10 +288,10 @@
282
288
  background: transparent;
283
289
  }
284
290
 
285
- .ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon{
291
+ .qtip-bootstrap .qtip-icon .ui-icon{
286
292
  /**
287
293
  * Overrides qTip2:
288
- * .ui-tooltip-icon .ui-icon{
294
+ * .qtip-icon .ui-icon{
289
295
  * width: 18px;
290
296
  * height: 14px;
291
297
  * }
@@ -304,7 +310,7 @@
304
310
  filter: alpha(opacity=20);
305
311
  }
306
312
 
307
- .ui-tooltip-bootstrap .ui-tooltip-icon .ui-icon:hover{
313
+ .qtip-bootstrap .qtip-icon .ui-icon:hover{
308
314
  /* Taken from Bootstrap .close:hover */
309
315
  color: #000000;
310
316
  text-decoration: none;
@@ -315,8 +321,8 @@
315
321
 
316
322
 
317
323
  /* IE9 fix - removes all filters */
318
- .ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,
319
- .ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{
324
+ .qtip:not(.ie9haxors) div.qtip-content,
325
+ .qtip:not(.ie9haxors) div.qtip-titlebar{
320
326
  filter: none;
321
327
  -ms-filter: none;
322
328
  }
@@ -0,0 +1,4 @@
1
+ /* IE6 Modal plugin fix */
2
+ .qtipmodal-ie6fix{
3
+ position: absolute !important;
4
+ }
@@ -0,0 +1,156 @@
1
+ /*
2
+ * BGIFrame adaption (http://plugins.jquery.com/project/bgiframe)
3
+ * Special thanks to Brandon Aaron
4
+ */
5
+ function IE6(api)
6
+ {
7
+ var self = this,
8
+ elems = api.elements,
9
+ options = api.options,
10
+ tooltip = elems.tooltip,
11
+ namespace = '.ie6-' + api.id,
12
+ bgiframe = $('select, object').length < 1,
13
+ isDrawing = 0,
14
+ modalProcessed = FALSE,
15
+ redrawContainer;
16
+
17
+ api.checks.ie6 = {
18
+ '^content|style$': function(obj, o, v){ redraw(); }
19
+ };
20
+
21
+ $.extend(self, {
22
+ init: function()
23
+ {
24
+ var win = $(window), scroll;
25
+
26
+ // Create the BGIFrame element if needed
27
+ if(bgiframe) {
28
+ elems.bgiframe = $('<iframe class="qtip-bgiframe" frameborder="0" tabindex="-1" src="javascript:\'\';" ' +
29
+ ' style="display:block; position:absolute; z-index:-1; filter:alpha(opacity=0); ' +
30
+ '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";"></iframe>');
31
+
32
+ // Append the new element to the tooltip
33
+ elems.bgiframe.appendTo(tooltip);
34
+
35
+ // Update BGIFrame on tooltip move
36
+ tooltip.bind('tooltipmove'+namespace, self.adjustBGIFrame);
37
+ }
38
+
39
+ // redraw() container for width/height calculations
40
+ redrawContainer = $('<div/>', { id: 'qtip-rcontainer' })
41
+ .appendTo(document.body);
42
+
43
+ // Set dimensions
44
+ self.redraw();
45
+
46
+ // Fixup modal plugin if present too
47
+ if(elems.overlay && !modalProcessed) {
48
+ scroll = function() {
49
+ elems.overlay[0].style.top = win.scrollTop() + 'px';
50
+ };
51
+ win.bind('scroll.qtip-ie6, resize.qtip-ie6', scroll);
52
+ scroll(); // Fire it initially too
53
+
54
+ elems.overlay.addClass('qtipmodal-ie6fix'); // Add fix class
55
+
56
+ modalProcessed = TRUE; // Set flag
57
+ }
58
+ },
59
+
60
+ adjustBGIFrame: function()
61
+ {
62
+ var dimensions = api.get('dimensions'), // Determine current tooltip dimensions
63
+ plugin = api.plugins.tip,
64
+ tip = elems.tip,
65
+ tipAdjust, offset;
66
+
67
+ // Adjust border offset
68
+ offset = parseInt(tooltip.css('border-left-width'), 10) || 0;
69
+ offset = { left: -offset, top: -offset };
70
+
71
+ // Adjust for tips plugin
72
+ if(plugin && tip) {
73
+ tipAdjust = (plugin.corner.precedance === 'x') ? ['width', 'left'] : ['height', 'top'];
74
+ offset[ tipAdjust[1] ] -= tip[ tipAdjust[0] ]();
75
+ }
76
+
77
+ // Update bgiframe
78
+ elems.bgiframe.css(offset).css(dimensions);
79
+ },
80
+
81
+ // Max/min width simulator function
82
+ redraw: function()
83
+ {
84
+ if(api.rendered < 1 || isDrawing) { return self; }
85
+
86
+ var style = options.style,
87
+ container = options.position.container,
88
+ perc, width, max, min;
89
+
90
+ // Set drawing flag
91
+ isDrawing = 1;
92
+
93
+ // If tooltip has a set height/width, just set it... like a boss!
94
+ if(style.height) { tooltip.css(HEIGHT, style.height); }
95
+ if(style.width) { tooltip.css(WIDTH, style.width); }
96
+
97
+ // Simulate max/min width if not set width present...
98
+ else {
99
+ // Reset width and add fluid class
100
+ tooltip.css(WIDTH, '').appendTo(redrawContainer);
101
+
102
+ // Grab our tooltip width (add 1 if odd so we don't get wrapping problems.. huzzah!)
103
+ width = tooltip.width();
104
+ if(width % 2 < 1) { width += 1; }
105
+
106
+ // Grab our max/min properties
107
+ max = tooltip.css('max-width') || '';
108
+ min = tooltip.css('min-width') || '';
109
+
110
+ // Parse into proper pixel values
111
+ perc = (max + min).indexOf('%') > -1 ? container.width() / 100 : 0;
112
+ max = ((max.indexOf('%') > -1 ? perc : 1) * parseInt(max, 10)) || width;
113
+ min = ((min.indexOf('%') > -1 ? perc : 1) * parseInt(min, 10)) || 0;
114
+
115
+ // Determine new dimension size based on max/min/current values
116
+ width = max + min ? Math.min(Math.max(width, min), max) : width;
117
+
118
+ // Set the newly calculated width and remvoe fluid class
119
+ tooltip.css(WIDTH, Math.round(width)).appendTo(container);
120
+ }
121
+
122
+ // Set drawing flag
123
+ isDrawing = 0;
124
+
125
+ return self;
126
+ },
127
+
128
+ destroy: function()
129
+ {
130
+ // Remove iframe
131
+ if(bgiframe) { elems.bgiframe.remove(); }
132
+
133
+ // Remove bound events
134
+ tooltip.unbind(namespace);
135
+ }
136
+ });
137
+
138
+ self.init();
139
+ }
140
+
141
+ PLUGINS.ie6 = function(api)
142
+ {
143
+ var browser = $.browser,
144
+ self = api.plugins.ie6;
145
+
146
+ // Proceed only if the browser is IE6
147
+ if(!(browser.msie && (''+browser.version).charAt(0) === '6')) {
148
+ return FALSE;
149
+ }
150
+
151
+ return 'object' === typeof self ? self : (api.plugins.ie6 = new IE6(api));
152
+ };
153
+
154
+ // Plugin needs to be initialized on render
155
+ PLUGINS.ie6.initialize = 'render';
156
+
@@ -38,23 +38,25 @@
38
38
 
39
39
  // Shortcut vars
40
40
  QTIP, PLUGINS, MOUSE,
41
+ NAMESPACE = 'qtip',
41
42
  usedIDs = {},
42
- uitooltip = 'ui-tooltip',
43
- widget = 'ui-widget',
44
- disabled = 'ui-state-disabled',
45
- selector = 'div.qtip.'+uitooltip,
46
- defaultClass = uitooltip + '-default',
47
- focusClass = uitooltip + '-focus',
48
- hoverClass = uitooltip + '-hover',
43
+ widget = ['ui-widget', 'ui-tooltip'],
44
+ selector = 'div.qtip.'+NAMESPACE,
45
+ defaultClass = NAMESPACE + '-default',
46
+ focusClass = NAMESPACE + '-focus',
47
+ hoverClass = NAMESPACE + '-hover',
49
48
  replaceSuffix = '_replacedByqTip',
50
49
  oldtitle = 'oldtitle',
51
- trackingBound,
52
- redrawContainer;
53
-
54
- /*
55
- * redraw() container for width/height calculations
56
- */
57
- redrawContainer = $('<div/>', { id: 'qtip-rcontainer' });
58
- $(function() { redrawContainer.appendTo(document.body); });
59
-
60
-
50
+ trackingBound;
51
+
52
+ // Store mouse coordinates
53
+ function storeMouse(event)
54
+ {
55
+ MOUSE = {
56
+ pageX: event.pageX,
57
+ pageY: event.pageY,
58
+ type: 'mousemove',
59
+ scrollX: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
60
+ scrollY: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
61
+ };
62
+ }