jquery-qtip2-rails 0.3.0 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
+ }