powertip-rails 0.0.1
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.
- data/MIT-LICENSE +22 -0
- data/README.md +25 -0
- data/lib/powertip-rails.rb +6 -0
- data/lib/powertip-rails/version.rb +3 -0
- data/vendor/assets/javascripts/core.js +257 -0
- data/vendor/assets/javascripts/csscoordinates.js +34 -0
- data/vendor/assets/javascripts/displaycontroller.js +120 -0
- data/vendor/assets/javascripts/grunt.js +74 -0
- data/vendor/assets/javascripts/intro.js +10 -0
- data/vendor/assets/javascripts/outro.js +10 -0
- data/vendor/assets/javascripts/placementcalculator.js +224 -0
- data/vendor/assets/javascripts/tooltipcontroller.js +383 -0
- data/vendor/assets/javascripts/utility.js +169 -0
- data/vendor/assets/stylesheets/jquery.powertip.blue.css +88 -0
- data/vendor/assets/stylesheets/jquery.powertip.css +85 -0
- data/vendor/assets/stylesheets/jquery.powertip.dark.css +88 -0
- data/vendor/assets/stylesheets/jquery.powertip.green.css +88 -0
- data/vendor/assets/stylesheets/jquery.powertip.light.css +88 -0
- data/vendor/assets/stylesheets/jquery.powertip.orange.css +88 -0
- data/vendor/assets/stylesheets/jquery.powertip.purple.css +88 -0
- data/vendor/assets/stylesheets/jquery.powertip.red.css +88 -0
- data/vendor/assets/stylesheets/jquery.powertip.yellow.css +88 -0
- metadata +84 -0
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* PowerTip Utility Functions
|
|
3
|
+
*
|
|
4
|
+
* @fileoverview Private helper functions.
|
|
5
|
+
* @link http://stevenbenner.github.com/jquery-powertip/
|
|
6
|
+
* @author Steven Benner (http://stevenbenner.com/)
|
|
7
|
+
* @requires jQuery 1.7+
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Determine whether a jQuery object is an SVG element
|
|
12
|
+
* @private
|
|
13
|
+
* @param {jQuery} element The element to check
|
|
14
|
+
* @return {boolean} Whether this is an SVG element
|
|
15
|
+
*/
|
|
16
|
+
function isSvgElement(element) {
|
|
17
|
+
return window.SVGElement && element[0] instanceof window.SVGElement;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Hooks mouse position tracking to mousemove and scroll events.
|
|
22
|
+
* Prevents attaching the events more than once.
|
|
23
|
+
* @private
|
|
24
|
+
*/
|
|
25
|
+
function initMouseTracking() {
|
|
26
|
+
var lastScrollX = 0,
|
|
27
|
+
lastScrollY = 0;
|
|
28
|
+
|
|
29
|
+
if (!session.mouseTrackingActive) {
|
|
30
|
+
session.mouseTrackingActive = true;
|
|
31
|
+
|
|
32
|
+
// grab the current scroll position on load
|
|
33
|
+
$(function getScrollPos() {
|
|
34
|
+
lastScrollX = $document.scrollLeft();
|
|
35
|
+
lastScrollY = $document.scrollTop();
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
// hook mouse position tracking
|
|
39
|
+
$document.on({
|
|
40
|
+
mousemove: trackMouse,
|
|
41
|
+
scroll: function trackScroll() {
|
|
42
|
+
var x = $document.scrollLeft(),
|
|
43
|
+
y = $document.scrollTop();
|
|
44
|
+
if (x !== lastScrollX) {
|
|
45
|
+
session.currentX += x - lastScrollX;
|
|
46
|
+
lastScrollX = x;
|
|
47
|
+
}
|
|
48
|
+
if (y !== lastScrollY) {
|
|
49
|
+
session.currentY += y - lastScrollY;
|
|
50
|
+
lastScrollY = y;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Saves the current mouse coordinates to the session object.
|
|
59
|
+
* @private
|
|
60
|
+
* @param {jQuery.Event} event The mousemove event for the document.
|
|
61
|
+
*/
|
|
62
|
+
function trackMouse(event) {
|
|
63
|
+
session.currentX = event.pageX;
|
|
64
|
+
session.currentY = event.pageY;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Tests if the mouse is currently over the specified element.
|
|
69
|
+
* @private
|
|
70
|
+
* @param {jQuery} element The element to check for hover.
|
|
71
|
+
* @return {boolean}
|
|
72
|
+
*/
|
|
73
|
+
function isMouseOver(element) {
|
|
74
|
+
// use getBoundingClientRect() because jQuery's width() and height()
|
|
75
|
+
// methods do not work with SVG elements
|
|
76
|
+
// compute width/height because those properties do not exist on the object
|
|
77
|
+
// returned by getBoundingClientRect() in older versions of IE
|
|
78
|
+
var elementPosition = element.offset(),
|
|
79
|
+
elementBox = element[0].getBoundingClientRect(),
|
|
80
|
+
elementWidth = elementBox.right - elementBox.left,
|
|
81
|
+
elementHeight = elementBox.bottom - elementBox.top;
|
|
82
|
+
|
|
83
|
+
return session.currentX >= elementPosition.left &&
|
|
84
|
+
session.currentX <= elementPosition.left + elementWidth &&
|
|
85
|
+
session.currentY >= elementPosition.top &&
|
|
86
|
+
session.currentY <= elementPosition.top + elementHeight;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Fetches the tooltip content from the specified element's data attributes.
|
|
91
|
+
* @private
|
|
92
|
+
* @param {jQuery} element The element to get the tooltip content for.
|
|
93
|
+
* @return {(string|jQuery|undefined)} The text/HTML string, jQuery object, or
|
|
94
|
+
* undefined if there was no tooltip content for the element.
|
|
95
|
+
*/
|
|
96
|
+
function getTooltipContent(element) {
|
|
97
|
+
var tipText = element.data(DATA_POWERTIP),
|
|
98
|
+
tipObject = element.data(DATA_POWERTIPJQ),
|
|
99
|
+
tipTarget = element.data(DATA_POWERTIPTARGET),
|
|
100
|
+
targetElement,
|
|
101
|
+
content;
|
|
102
|
+
|
|
103
|
+
if (tipText) {
|
|
104
|
+
if (typeof tipText === 'function') {
|
|
105
|
+
tipText = tipText.call(element[0]);
|
|
106
|
+
}
|
|
107
|
+
content = tipText;
|
|
108
|
+
} else if (tipObject) {
|
|
109
|
+
if (typeof tipObject === 'function') {
|
|
110
|
+
tipObject = tipObject.call(element[0]);
|
|
111
|
+
}
|
|
112
|
+
if (tipObject.length > 0) {
|
|
113
|
+
content = tipObject.clone(true, true);
|
|
114
|
+
}
|
|
115
|
+
} else if (tipTarget) {
|
|
116
|
+
targetElement = $('#' + tipTarget);
|
|
117
|
+
if (targetElement.length > 0) {
|
|
118
|
+
content = $('#' + tipTarget).html();
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
return content;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Finds any viewport collisions that an element (the tooltip) would have if it
|
|
127
|
+
* were absolutely positioned at the specified coordinates.
|
|
128
|
+
* @private
|
|
129
|
+
* @param {CSSCoordinates} coords Coordinates for the element.
|
|
130
|
+
* @param {number} elementWidth Width of the element in pixels.
|
|
131
|
+
* @param {number} elementHeight Height of the element in pixels.
|
|
132
|
+
* @return {number} Value with the collision flags.
|
|
133
|
+
*/
|
|
134
|
+
function getViewportCollisions(coords, elementWidth, elementHeight) {
|
|
135
|
+
var scrollLeft = $window.scrollLeft(),
|
|
136
|
+
scrollTop = $window.scrollTop(),
|
|
137
|
+
windowWidth = $window.width(),
|
|
138
|
+
windowHeight = $window.height(),
|
|
139
|
+
collisions = Collision.none;
|
|
140
|
+
|
|
141
|
+
if (coords.top < scrollTop) {
|
|
142
|
+
collisions |= Collision.top;
|
|
143
|
+
}
|
|
144
|
+
if (coords.top + elementHeight > scrollTop + windowHeight) {
|
|
145
|
+
collisions |= Collision.bottom;
|
|
146
|
+
}
|
|
147
|
+
if (coords.left < scrollLeft || coords.right + elementWidth > scrollLeft + windowWidth) {
|
|
148
|
+
collisions |= Collision.left;
|
|
149
|
+
}
|
|
150
|
+
if (coords.left + elementWidth > scrollLeft + windowWidth || coords.right < scrollLeft) {
|
|
151
|
+
collisions |= Collision.right;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
return collisions;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/**
|
|
158
|
+
* Counts the number of bits set on a flags value.
|
|
159
|
+
* @param {number} value The flags value.
|
|
160
|
+
* @return {number} The number of bits that have been set.
|
|
161
|
+
*/
|
|
162
|
+
function countFlags(value) {
|
|
163
|
+
var count = 0;
|
|
164
|
+
while (value) {
|
|
165
|
+
value &= value - 1;
|
|
166
|
+
count++;
|
|
167
|
+
}
|
|
168
|
+
return count;
|
|
169
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/* PowerTip Plugin */
|
|
2
|
+
#powerTip {
|
|
3
|
+
cursor: default;
|
|
4
|
+
background-color: #d2e6fa;
|
|
5
|
+
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.5) inset, 0 -2px 2px #a5d2fa inset;
|
|
6
|
+
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.5) inset, 0 -2px 2px #a5d2fa inset;
|
|
7
|
+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.5) inset, 0 -2px 2px #a5d2fa inset;
|
|
8
|
+
border: 1px solid #4b91d2;
|
|
9
|
+
border-radius: 6px;
|
|
10
|
+
color: #000000;
|
|
11
|
+
display: none;
|
|
12
|
+
padding: 10px;
|
|
13
|
+
position: absolute;
|
|
14
|
+
white-space: nowrap;
|
|
15
|
+
z-index: 2147483647;
|
|
16
|
+
}
|
|
17
|
+
#powerTip:before {
|
|
18
|
+
content: "";
|
|
19
|
+
position: absolute;
|
|
20
|
+
}
|
|
21
|
+
#powerTip.n:before, #powerTip.s:before {
|
|
22
|
+
border-right: 5px solid transparent;
|
|
23
|
+
border-left: 5px solid transparent;
|
|
24
|
+
left: 50%;
|
|
25
|
+
margin-left: -5px;
|
|
26
|
+
}
|
|
27
|
+
#powerTip.e:before, #powerTip.w:before {
|
|
28
|
+
border-bottom: 5px solid transparent;
|
|
29
|
+
border-top: 5px solid transparent;
|
|
30
|
+
margin-top: -5px;
|
|
31
|
+
top: 50%;
|
|
32
|
+
}
|
|
33
|
+
#powerTip.n:before {
|
|
34
|
+
border-top: 10px solid rgba(75, 145, 210, 0.8);
|
|
35
|
+
bottom: -10px;
|
|
36
|
+
}
|
|
37
|
+
#powerTip.e:before {
|
|
38
|
+
border-right: 10px solid rgba(75, 145, 210, 0.8);
|
|
39
|
+
left: -10px;
|
|
40
|
+
}
|
|
41
|
+
#powerTip.s:before {
|
|
42
|
+
border-bottom: 10px solid rgba(75, 145, 210, 0.8);
|
|
43
|
+
top: -10px;
|
|
44
|
+
}
|
|
45
|
+
#powerTip.w:before {
|
|
46
|
+
border-left: 10px solid rgba(75, 145, 210, 0.8);
|
|
47
|
+
right: -10px;
|
|
48
|
+
}
|
|
49
|
+
#powerTip.ne:before, #powerTip.se:before {
|
|
50
|
+
border-right: 10px solid transparent;
|
|
51
|
+
border-left: 0;
|
|
52
|
+
left: 10px;
|
|
53
|
+
}
|
|
54
|
+
#powerTip.nw:before, #powerTip.sw:before {
|
|
55
|
+
border-left: 10px solid transparent;
|
|
56
|
+
border-right: 0;
|
|
57
|
+
right: 10px;
|
|
58
|
+
}
|
|
59
|
+
#powerTip.ne:before, #powerTip.nw:before {
|
|
60
|
+
border-top: 10px solid rgba(75, 145, 210, 0.8);
|
|
61
|
+
bottom: -10px;
|
|
62
|
+
}
|
|
63
|
+
#powerTip.se:before, #powerTip.sw:before {
|
|
64
|
+
border-bottom: 10px solid rgba(75, 145, 210, 0.8);
|
|
65
|
+
top: -10px;
|
|
66
|
+
}
|
|
67
|
+
#powerTip.nw-alt:before, #powerTip.ne-alt:before,
|
|
68
|
+
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
|
69
|
+
border-top: 10px solid rgba(75, 145, 210, 0.8);
|
|
70
|
+
bottom: -10px;
|
|
71
|
+
border-left: 5px solid transparent;
|
|
72
|
+
border-right: 5px solid transparent;
|
|
73
|
+
left: 10px;
|
|
74
|
+
}
|
|
75
|
+
#powerTip.ne-alt:before {
|
|
76
|
+
left: auto;
|
|
77
|
+
right: 10px;
|
|
78
|
+
}
|
|
79
|
+
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
|
80
|
+
border-top: none;
|
|
81
|
+
border-bottom: 10px solid rgba(75, 145, 210, 0.8);
|
|
82
|
+
bottom: auto;
|
|
83
|
+
top: -10px;
|
|
84
|
+
}
|
|
85
|
+
#powerTip.se-alt:before {
|
|
86
|
+
left: auto;
|
|
87
|
+
right: 10px;
|
|
88
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* PowerTip Plugin */
|
|
2
|
+
#powerTip {
|
|
3
|
+
cursor: default;
|
|
4
|
+
background-color: #333; /* fallback for browsers that dont support rgba */
|
|
5
|
+
background-color: rgba(0, 0, 0, 0.8);
|
|
6
|
+
border-radius: 6px;
|
|
7
|
+
color: #FFF;
|
|
8
|
+
display: none;
|
|
9
|
+
padding: 10px;
|
|
10
|
+
position: absolute;
|
|
11
|
+
white-space: nowrap;
|
|
12
|
+
z-index: 2147483647;
|
|
13
|
+
}
|
|
14
|
+
#powerTip:before {
|
|
15
|
+
content: "";
|
|
16
|
+
position: absolute;
|
|
17
|
+
}
|
|
18
|
+
#powerTip.n:before, #powerTip.s:before {
|
|
19
|
+
border-right: 5px solid transparent;
|
|
20
|
+
border-left: 5px solid transparent;
|
|
21
|
+
left: 50%;
|
|
22
|
+
margin-left: -5px;
|
|
23
|
+
}
|
|
24
|
+
#powerTip.e:before, #powerTip.w:before {
|
|
25
|
+
border-bottom: 5px solid transparent;
|
|
26
|
+
border-top: 5px solid transparent;
|
|
27
|
+
margin-top: -5px;
|
|
28
|
+
top: 50%;
|
|
29
|
+
}
|
|
30
|
+
#powerTip.n:before {
|
|
31
|
+
border-top: 10px solid rgba(0, 0, 0, 0.8);
|
|
32
|
+
bottom: -10px;
|
|
33
|
+
}
|
|
34
|
+
#powerTip.e:before {
|
|
35
|
+
border-right: 10px solid rgba(0, 0, 0, 0.8);
|
|
36
|
+
left: -10px;
|
|
37
|
+
}
|
|
38
|
+
#powerTip.s:before {
|
|
39
|
+
border-bottom: 10px solid rgba(0, 0, 0, 0.8);
|
|
40
|
+
top: -10px;
|
|
41
|
+
}
|
|
42
|
+
#powerTip.w:before {
|
|
43
|
+
border-left: 10px solid rgba(0, 0, 0, 0.8);
|
|
44
|
+
right: -10px;
|
|
45
|
+
}
|
|
46
|
+
#powerTip.ne:before, #powerTip.se:before {
|
|
47
|
+
border-right: 10px solid transparent;
|
|
48
|
+
border-left: 0;
|
|
49
|
+
left: 10px;
|
|
50
|
+
}
|
|
51
|
+
#powerTip.nw:before, #powerTip.sw:before {
|
|
52
|
+
border-left: 10px solid transparent;
|
|
53
|
+
border-right: 0;
|
|
54
|
+
right: 10px;
|
|
55
|
+
}
|
|
56
|
+
#powerTip.ne:before, #powerTip.nw:before {
|
|
57
|
+
border-top: 10px solid rgba(0, 0, 0, 0.8);
|
|
58
|
+
bottom: -10px;
|
|
59
|
+
}
|
|
60
|
+
#powerTip.se:before, #powerTip.sw:before {
|
|
61
|
+
border-bottom: 10px solid rgba(0, 0, 0, 0.8);
|
|
62
|
+
top: -10px;
|
|
63
|
+
}
|
|
64
|
+
#powerTip.nw-alt:before, #powerTip.ne-alt:before,
|
|
65
|
+
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
|
66
|
+
border-top: 10px solid rgba(0, 0, 0, 0.8);
|
|
67
|
+
bottom: -10px;
|
|
68
|
+
border-left: 5px solid transparent;
|
|
69
|
+
border-right: 5px solid transparent;
|
|
70
|
+
left: 10px;
|
|
71
|
+
}
|
|
72
|
+
#powerTip.ne-alt:before {
|
|
73
|
+
left: auto;
|
|
74
|
+
right: 10px;
|
|
75
|
+
}
|
|
76
|
+
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
|
77
|
+
border-top: none;
|
|
78
|
+
border-bottom: 10px solid rgba(0, 0, 0, 0.8);
|
|
79
|
+
bottom: auto;
|
|
80
|
+
top: -10px;
|
|
81
|
+
}
|
|
82
|
+
#powerTip.se-alt:before {
|
|
83
|
+
left: auto;
|
|
84
|
+
right: 10px;
|
|
85
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/* PowerTip Plugin */
|
|
2
|
+
#powerTip {
|
|
3
|
+
cursor: default;
|
|
4
|
+
background-color: #424242;
|
|
5
|
+
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.2) inset, 0 -2px 2px #323232 inset;
|
|
6
|
+
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.2) inset, 0 -2px 2px #323232 inset;
|
|
7
|
+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.2) inset, 0 -2px 2px #323232 inset;
|
|
8
|
+
border: 1px solid #000000;
|
|
9
|
+
border-radius: 6px;
|
|
10
|
+
color: #ffffff;
|
|
11
|
+
display: none;
|
|
12
|
+
padding: 10px;
|
|
13
|
+
position: absolute;
|
|
14
|
+
white-space: nowrap;
|
|
15
|
+
z-index: 2147483647;
|
|
16
|
+
}
|
|
17
|
+
#powerTip:before {
|
|
18
|
+
content: "";
|
|
19
|
+
position: absolute;
|
|
20
|
+
}
|
|
21
|
+
#powerTip.n:before, #powerTip.s:before {
|
|
22
|
+
border-right: 5px solid transparent;
|
|
23
|
+
border-left: 5px solid transparent;
|
|
24
|
+
left: 50%;
|
|
25
|
+
margin-left: -5px;
|
|
26
|
+
}
|
|
27
|
+
#powerTip.e:before, #powerTip.w:before {
|
|
28
|
+
border-bottom: 5px solid transparent;
|
|
29
|
+
border-top: 5px solid transparent;
|
|
30
|
+
margin-top: -5px;
|
|
31
|
+
top: 50%;
|
|
32
|
+
}
|
|
33
|
+
#powerTip.n:before {
|
|
34
|
+
border-top: 10px solid rgba(0, 0, 0, 0.8);
|
|
35
|
+
bottom: -10px;
|
|
36
|
+
}
|
|
37
|
+
#powerTip.e:before {
|
|
38
|
+
border-right: 10px solid rgba(0, 0, 0, 0.8);
|
|
39
|
+
left: -10px;
|
|
40
|
+
}
|
|
41
|
+
#powerTip.s:before {
|
|
42
|
+
border-bottom: 10px solid rgba(0, 0, 0, 0.8);
|
|
43
|
+
top: -10px;
|
|
44
|
+
}
|
|
45
|
+
#powerTip.w:before {
|
|
46
|
+
border-left: 10px solid rgba(0, 0, 0, 0.8);
|
|
47
|
+
right: -10px;
|
|
48
|
+
}
|
|
49
|
+
#powerTip.ne:before, #powerTip.se:before {
|
|
50
|
+
border-right: 10px solid transparent;
|
|
51
|
+
border-left: 0;
|
|
52
|
+
left: 10px;
|
|
53
|
+
}
|
|
54
|
+
#powerTip.nw:before, #powerTip.sw:before {
|
|
55
|
+
border-left: 10px solid transparent;
|
|
56
|
+
border-right: 0;
|
|
57
|
+
right: 10px;
|
|
58
|
+
}
|
|
59
|
+
#powerTip.ne:before, #powerTip.nw:before {
|
|
60
|
+
border-top: 10px solid rgba(0, 0, 0, 0.8);
|
|
61
|
+
bottom: -10px;
|
|
62
|
+
}
|
|
63
|
+
#powerTip.se:before, #powerTip.sw:before {
|
|
64
|
+
border-bottom: 10px solid rgba(0, 0, 0, 0.8);
|
|
65
|
+
top: -10px;
|
|
66
|
+
}
|
|
67
|
+
#powerTip.nw-alt:before, #powerTip.ne-alt:before,
|
|
68
|
+
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
|
69
|
+
border-top: 10px solid rgba(0, 0, 0, 0.8);
|
|
70
|
+
bottom: -10px;
|
|
71
|
+
border-left: 5px solid transparent;
|
|
72
|
+
border-right: 5px solid transparent;
|
|
73
|
+
left: 10px;
|
|
74
|
+
}
|
|
75
|
+
#powerTip.ne-alt:before {
|
|
76
|
+
left: auto;
|
|
77
|
+
right: 10px;
|
|
78
|
+
}
|
|
79
|
+
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
|
80
|
+
border-top: none;
|
|
81
|
+
border-bottom: 10px solid rgba(0, 0, 0, 0.8);
|
|
82
|
+
bottom: auto;
|
|
83
|
+
top: -10px;
|
|
84
|
+
}
|
|
85
|
+
#powerTip.se-alt:before {
|
|
86
|
+
left: auto;
|
|
87
|
+
right: 10px;
|
|
88
|
+
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/* PowerTip Plugin */
|
|
2
|
+
#powerTip {
|
|
3
|
+
cursor: default;
|
|
4
|
+
background-color: #f0ffb9;
|
|
5
|
+
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.8) inset, 0 -2px 2px #dcf582 inset;
|
|
6
|
+
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.8) inset, 0 -2px 2px #dcf582 inset;
|
|
7
|
+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.8) inset, 0 -2px 2px #dcf582 inset;
|
|
8
|
+
border: 1px solid #9bc800;
|
|
9
|
+
border-radius: 6px;
|
|
10
|
+
color: #000000;
|
|
11
|
+
display: none;
|
|
12
|
+
padding: 10px;
|
|
13
|
+
position: absolute;
|
|
14
|
+
white-space: nowrap;
|
|
15
|
+
z-index: 2147483647;
|
|
16
|
+
}
|
|
17
|
+
#powerTip:before {
|
|
18
|
+
content: "";
|
|
19
|
+
position: absolute;
|
|
20
|
+
}
|
|
21
|
+
#powerTip.n:before, #powerTip.s:before {
|
|
22
|
+
border-right: 5px solid transparent;
|
|
23
|
+
border-left: 5px solid transparent;
|
|
24
|
+
left: 50%;
|
|
25
|
+
margin-left: -5px;
|
|
26
|
+
}
|
|
27
|
+
#powerTip.e:before, #powerTip.w:before {
|
|
28
|
+
border-bottom: 5px solid transparent;
|
|
29
|
+
border-top: 5px solid transparent;
|
|
30
|
+
margin-top: -5px;
|
|
31
|
+
top: 50%;
|
|
32
|
+
}
|
|
33
|
+
#powerTip.n:before {
|
|
34
|
+
border-top: 10px solid rgba(155, 200, 0, 0.8);
|
|
35
|
+
bottom: -10px;
|
|
36
|
+
}
|
|
37
|
+
#powerTip.e:before {
|
|
38
|
+
border-right: 10px solid rgba(155, 200, 0, 0.8);
|
|
39
|
+
left: -10px;
|
|
40
|
+
}
|
|
41
|
+
#powerTip.s:before {
|
|
42
|
+
border-bottom: 10px solid rgba(155, 200, 0, 0.8);
|
|
43
|
+
top: -10px;
|
|
44
|
+
}
|
|
45
|
+
#powerTip.w:before {
|
|
46
|
+
border-left: 10px solid rgba(155, 200, 0, 0.8);
|
|
47
|
+
right: -10px;
|
|
48
|
+
}
|
|
49
|
+
#powerTip.ne:before, #powerTip.se:before {
|
|
50
|
+
border-right: 10px solid transparent;
|
|
51
|
+
border-left: 0;
|
|
52
|
+
left: 10px;
|
|
53
|
+
}
|
|
54
|
+
#powerTip.nw:before, #powerTip.sw:before {
|
|
55
|
+
border-left: 10px solid transparent;
|
|
56
|
+
border-right: 0;
|
|
57
|
+
right: 10px;
|
|
58
|
+
}
|
|
59
|
+
#powerTip.ne:before, #powerTip.nw:before {
|
|
60
|
+
border-top: 10px solid rgba(155, 200, 0, 0.8);
|
|
61
|
+
bottom: -10px;
|
|
62
|
+
}
|
|
63
|
+
#powerTip.se:before, #powerTip.sw:before {
|
|
64
|
+
border-bottom: 10px solid rgba(155, 200, 0, 0.8);
|
|
65
|
+
top: -10px;
|
|
66
|
+
}
|
|
67
|
+
#powerTip.nw-alt:before, #powerTip.ne-alt:before,
|
|
68
|
+
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
|
69
|
+
border-top: 10px solid rgba(155, 200, 0, 0.8);
|
|
70
|
+
bottom: -10px;
|
|
71
|
+
border-left: 5px solid transparent;
|
|
72
|
+
border-right: 5px solid transparent;
|
|
73
|
+
left: 10px;
|
|
74
|
+
}
|
|
75
|
+
#powerTip.ne-alt:before {
|
|
76
|
+
left: auto;
|
|
77
|
+
right: 10px;
|
|
78
|
+
}
|
|
79
|
+
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
|
80
|
+
border-top: none;
|
|
81
|
+
border-bottom: 10px solid rgba(155, 200, 0, 0.8);
|
|
82
|
+
bottom: auto;
|
|
83
|
+
top: -10px;
|
|
84
|
+
}
|
|
85
|
+
#powerTip.se-alt:before {
|
|
86
|
+
left: auto;
|
|
87
|
+
right: 10px;
|
|
88
|
+
}
|