Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Prefixed class names to avoid conflicts and fixed css bug in white tr…

…ansparent theme.
  • Loading branch information...
commit ce8b9e69e7d3a6e4ca1fcad733626a442fc01626 1 parent a7ed2e6
@Sebobo authored
View
141 css/jquery-smallipop.css
@@ -1,57 +1,57 @@
-/* Bubbletip css */
+/* smallipop css */
.smallipopHint { display: none; }
#smallipop { position: absolute; display: none; background-color: #314b64; border: 1px solid #0f161e; color: #d2dfe7; z-index: 9999; max-width: 400px; }
-#smallipop .bubbleContent { padding: 10px; }
-#smallipop .bubbleArrow, #smallipop .bubbleArrowBorder { position: absolute; left: 50%; height: 0; width: 0; }
-#smallipop .bubbleArrow { bottom: -20px; margin-left: -10px; border: 10px solid transparent; }
-#smallipop .bubbleArrowBorder { bottom: -24px; margin-left: -12px; border: 12px solid transparent; }
-#smallipop.alignLeft .bubbleArrow { margin-left: 0; left: auto; right: 20px; }
-#smallipop.alignLeft .bubbleArrowBorder { margin-left: 0; left: auto; right: 18px; }
-#smallipop.alignRight .bubbleArrow { margin-left: 0; left: 20px; right: auto; }
-#smallipop.alignRight .bubbleArrowBorder { margin-left: 0; left: 18px; right: auto; }
-#smallipop.alignBottom .bubbleArrow { bottom: auto; top: -20px; }
-#smallipop.alignBottom .bubbleArrowBorder { bottom: auto; top: -24px; }
-#smallipop.positionedLeft .bubbleArrow, #smallipop.positionedLeft .bubbleArrowBorder { right: -16px; left: auto; top: 50%; bottom: auto; border-width: 8px; margin: -8px 0 0; }
-#smallipop.positionedLeft .bubbleArrowBorder { right: -20px; border-width: 10px; margin: -10px 0 0; }
-#smallipop.positionedRight .bubbleArrow, #smallipop.positionedRight .bubbleArrowBorder { left: -16px; right: auto; top: 50%; bottom: auto; border-width: 8px; margin: -8px 0 0; }
-#smallipop.positionedRight .bubbleArrowBorder { left: -20px; border-width: 10px; margin: -10px 0 0; }
+#smallipop .sipContent { padding: 10px; }
+#smallipop .sipArrow, #smallipop .sipArrowBorder { position: absolute; left: 50%; height: 0; width: 0; }
+#smallipop .sipArrow { bottom: -20px; margin-left: -10px; border: 10px solid transparent; }
+#smallipop .sipArrowBorder { bottom: -24px; margin-left: -12px; border: 12px solid transparent; }
+#smallipop.sipAlignLeft .sipArrow { margin-left: 0; left: auto; right: 20px; }
+#smallipop.sipAlignLeft .sipArrowBorder { margin-left: 0; left: auto; right: 18px; }
+#smallipop.sipAlignRight .sipArrow { margin-left: 0; left: 20px; right: auto; }
+#smallipop.sipAlignRight .sipArrowBorder { margin-left: 0; left: 18px; right: auto; }
+#smallipop.sipAlignBottom .sipArrow { bottom: auto; top: -20px; }
+#smallipop.sipAlignBottom .sipArrowBorder { bottom: auto; top: -24px; }
+#smallipop.sipPositionedLeft .sipArrow, #smallipop.sipPositionedLeft .sipArrowBorder { right: -16px; left: auto; top: 50%; bottom: auto; border-width: 8px; margin: -8px 0 0; }
+#smallipop.sipPositionedLeft .sipArrowBorder { right: -20px; border-width: 10px; margin: -10px 0 0; }
+#smallipop.sipPositionedRight .sipArrow, #smallipop.sipPositionedRight .sipArrowBorder { left: -16px; right: auto; top: 50%; bottom: auto; border-width: 8px; margin: -8px 0 0; }
+#smallipop.sipPositionedRight .sipArrowBorder { left: -20px; border-width: 10px; margin: -10px 0 0; }
#smallipop a { color: #98cbea; }
/* default theme */
#smallipop.default { text-shadow: 0 -1px 1px #0f161e; }
-#smallipop.default .bubbleContent { border-top: 1px solid #586d82; }
+#smallipop.default .sipContent { border-top: 1px solid #586d82; }
#smallipop.default a { text-shadow: 0 -1px 1px #0f161e; }
-#smallipop.default .bubbleArrow { border-color: #1a2634 transparent transparent transparent; }
-#smallipop.default .bubbleArrowBorder { border-color: #0f161e transparent transparent transparent; }
-#smallipop.default.alignBottom .bubbleArrow { border-color: transparent transparent #1a2634 transparent; }
-#smallipop.default.alignBottom .bubbleArrowBorder { border-color: transparent transparent #0f161e transparent; }
-#smallipop.default.positionedLeft .bubbleArrow { border-color: transparent transparent transparent #1a2634; }
-#smallipop.default.positionedLeft .bubbleArrowBorder { border-color: transparent transparent transparent #0f161e; }
-#smallipop.default.positionedRight .bubbleArrow { border-color: transparent #1a2634 transparent transparent; }
-#smallipop.default.positionedRight .bubbleArrowBorder { border-color: transparent #0f161e transparent transparent; }
+#smallipop.default .sipArrow { border-color: #1a2634 transparent transparent transparent; }
+#smallipop.default .sipArrowBorder { border-color: #0f161e transparent transparent transparent; }
+#smallipop.default.sipAlignBottom .sipArrow { border-color: transparent transparent #1a2634 transparent; }
+#smallipop.default.sipAlignBottom .sipArrowBorder { border-color: transparent transparent #0f161e transparent; }
+#smallipop.default.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent #1a2634; }
+#smallipop.default.sipPositionedLeft .sipArrowBorder { border-color: transparent transparent transparent #0f161e; }
+#smallipop.default.sipPositionedRight .sipArrow { border-color: transparent #1a2634 transparent transparent; }
+#smallipop.default.sipPositionedRight .sipArrowBorder { border-color: transparent #0f161e transparent transparent; }
.cssgradients.rgba #smallipop.default { background-color: transparent; background-image: -webkit-linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); background-image: -moz-linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); background-image: -ms-linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); background-image: -o-linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); background-image: linear-gradient(top, rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9)); /* Fallback for opera */ background-image: -webkit-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); background-image: -moz-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); background-image: -ms-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); background-image: -o-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); background-image: radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px); }
.boxshadow.rgba #smallipop.default { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.borderradius #smallipop.default { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
-.borderradius #smallipop.default .bubbleContent { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
+.borderradius #smallipop.default .sipContent { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
/* blue theme */
#smallipop.blue { background: transparent; border: 10px solid #0064b4; color: #111; font-size: 11px; }
#smallipop.blue a { color: #2276aa; }
-#smallipop.blue .bubbleContent { border: 0; background: #fefefe; }
-#smallipop.blue .bubbleArrow { bottom: -30px; border-color: #0064b4 transparent transparent transparent; }
-#smallipop.blue.alignBottom .bubbleArrow { top: -30px; border-color: transparent transparent #0064b4 transparent; }
-#smallipop.blue.positionedLeft .bubbleArrow { right: -26px; border-color: transparent transparent transparent #0064b4; }
-#smallipop.blue.positionedRight .bubbleArrow { left: -26px; border-color: transparent #0064b4 transparent transparent; }
+#smallipop.blue .sipContent { border: 0; background: #fefefe; }
+#smallipop.blue .sipArrow { bottom: -30px; border-color: #0064b4 transparent transparent transparent; }
+#smallipop.blue.sipAlignBottom .sipArrow { top: -30px; border-color: transparent transparent #0064b4 transparent; }
+#smallipop.blue.sipPositionedLeft .sipArrow { right: -26px; border-color: transparent transparent transparent #0064b4; }
+#smallipop.blue.sipPositionedRight .sipArrow { left: -26px; border-color: transparent #0064b4 transparent transparent; }
.rgba #smallipop.blue { border-color: rgba(0, 100, 180, 0.9); }
-.rgba #smallipop.blue .bubbleArrow { border-color: rgba(0, 100, 180, 0.9) transparent transparent transparent; }
-.rgba #smallipop.blue.alignBottom .bubbleArrow { border-color: transparent transparent rgba(0, 100, 180, 0.9) transparent; }
-.rgba #smallipop.blue.positionedLeft .bubbleArrow { border-color: transparent transparent transparent rgba(0, 100, 180, 0.9); }
-.rgba #smallipop.blue.positionedRight .bubbleArrow { border-color: transparent rgba(0, 100, 180, 0.9) transparent transparent; }
+.rgba #smallipop.blue .sipArrow { border-color: rgba(0, 100, 180, 0.9) transparent transparent transparent; }
+.rgba #smallipop.blue.sipAlignBottom .sipArrow { border-color: transparent transparent rgba(0, 100, 180, 0.9) transparent; }
+.rgba #smallipop.blue.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent rgba(0, 100, 180, 0.9); }
+.rgba #smallipop.blue.sipPositionedRight .sipArrow { border-color: transparent rgba(0, 100, 180, 0.9) transparent transparent; }
.boxshadow.rgba #smallipop.blue { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
@@ -60,71 +60,68 @@
/* black theme */
#smallipop.black { background-color: #222; border-color: #111; text-shadow: 0 -1px 1px #111111; color: #f5f5f5; }
#smallipop.black a { color: #eef8ff; text-shadow: 0 -1px 1px #111111; }
-#smallipop.black .bubbleContent { border-top: 1px solid #666; }
-#smallipop.black .bubbleArrow { border-color: #222 transparent transparent transparent; }
-#smallipop.black .bubbleArrowBorder { border-color: #111 transparent transparent transparent; }
-#smallipop.black.alignBottom .bubbleArrow { border-color: transparent transparent #222 transparent; }
-#smallipop.black.alignBottom .bubbleArrowBorder { border-color: transparent transparent #111 transparent; }
-#smallipop.black.positionedLeft .bubbleArrow { border-color: transparent transparent transparent #222; }
-#smallipop.black.positionedLeft .bubbleArrowBorder { border-color: transparent transparent transparent #111; }
-#smallipop.black.positionedRight .bubbleArrow { border-color: transparent #222 transparent transparent; }
-#smallipop.black.positionedRight .bubbleArrowBorder { border-color: transparent #111 transparent transparent; }
+#smallipop.black .sipContent { border-top: 1px solid #666; }
+#smallipop.black .sipArrow { border-color: #222 transparent transparent transparent; }
+#smallipop.black .sipArrowBorder { border-color: #111 transparent transparent transparent; }
+#smallipop.black.sipAlignBottom .sipArrow { border-color: transparent transparent #222 transparent; }
+#smallipop.black.sipAlignBottom .sipArrowBorder { border-color: transparent transparent #111 transparent; }
+#smallipop.black.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent #222; }
+#smallipop.black.sipPositionedLeft .sipArrowBorder { border-color: transparent transparent transparent #111; }
+#smallipop.black.sipPositionedRight .sipArrow { border-color: transparent #222 transparent transparent; }
+#smallipop.black.sipPositionedRight .sipArrowBorder { border-color: transparent #111 transparent transparent; }
.cssgradients #smallipop.black { background-color: transparent; background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #333333, #222222); }
.boxshadow.rgba #smallipop.black { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.borderradius #smallipop.black { border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
-.borderradius #smallipop.black .bubbleContent { border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
+.borderradius #smallipop.black .sipContent { border-radius: 5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
/* orange theme */
#smallipop.orange { background-color: #f9aa18; border-color: #e17500; text-shadow: 0 1px 1px #fff24d; color: #714900; }
#smallipop.orange a { color: #145d95; text-shadow: 0 1px 1px #fff24d; }
-#smallipop.orange .bubbleContent { border-top: 1px solid #fffabc; }
-#smallipop.orange .bubbleArrow { border-color: #f9aa18 transparent transparent transparent; }
-#smallipop.orange .bubbleArrowBorder { border-color: #e17500 transparent transparent transparent; }
-#smallipop.orange.alignBottom .bubbleArrow { border-color: transparent transparent #f9aa18 transparent; }
-#smallipop.orange.alignBottom .bubbleArrowBorder { border-color: transparent transparent #e17500 transparent; }
-#smallipop.orange.positionedLeft .bubbleArrow { border-color: transparent transparent transparent #f9c718; }
-#smallipop.orange.positionedLeft .bubbleArrowBorder { border-color: transparent transparent transparent #e17500; }
-#smallipop.orange.positionedRight .bubbleArrow { border-color: transparent #f9c718 transparent transparent; }
-#smallipop.orange.positionedRight .bubbleArrowBorder { border-color: transparent #e17500 transparent transparent; }
+#smallipop.orange .sipContent { border-top: 1px solid #fffabc; }
+#smallipop.orange .sipArrow { border-color: #f9aa18 transparent transparent transparent; }
+#smallipop.orange .sipArrowBorder { border-color: #e17500 transparent transparent transparent; }
+#smallipop.orange.sipAlignBottom .sipArrow { border-color: transparent transparent #f9aa18 transparent; }
+#smallipop.orange.sipAlignBottom .sipArrowBorder { border-color: transparent transparent #e17500 transparent; }
+#smallipop.orange.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent #f9c718; }
+#smallipop.orange.sipPositionedLeft .sipArrowBorder { border-color: transparent transparent transparent #e17500; }
+#smallipop.orange.sipPositionedRight .sipArrow { border-color: transparent #f9c718 transparent transparent; }
+#smallipop.orange.sipPositionedRight .sipArrowBorder { border-color: transparent #e17500 transparent transparent; }
.cssgradients #smallipop.orange { background-image: -webkit-linear-gradient(top, #fff24d, #f9aa18); background-image: -moz-linear-gradient(top, #fff24d, #f9aa18); background-image: -ms-linear-gradient(top, #fff24d, #f9aa18); background-image: -o-linear-gradient(top, #fff24d, #f9aa18); background-image: linear-gradient(top, #fff24d, #f9aa18); }
.boxshadow.rgba #smallipop.orange { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.borderradius #smallipop.orange { border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
-.borderradius #smallipop.orange .bubbleContent { border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
+.borderradius #smallipop.orange .sipContent { border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
/* white theme */
#smallipop.white { background-color: #fafafa; border-color: #ccc; text-shadow: 0 1px 1px #eee; color: #444; width: 200px; max-width: 200px; }
-#smallipop.white .bubbleContent { text-align: center; }
-#smallipop.white .bubbleArrow { border-color: #fafafa transparent transparent transparent; }
-#smallipop.white .bubbleArrowBorder { border-color: #ccc transparent transparent transparent; }
-#smallipop.white.alignBottom .bubbleArrow { border-color: transparent transparent #fafafa transparent; }
-#smallipop.white.alignBottom .bubbleArrowBorder { border-color: transparent transparent #ccc transparent; }
-#smallipop.white.positionedLeft .bubbleArrow { border-color: transparent transparent transparent #fafafa; }
-#smallipop.white.positionedLeft .bubbleArrowBorder { border-color: transparent transparent transparent #ccc; }
-#smallipop.white.positionedRight .bubbleArrow { border-color: transparent #fafafa transparent transparent; }
-#smallipop.white.positionedRight .bubbleArrowBorder { border-color: transparent #ccc transparent transparent; }
+#smallipop.white .sipContent { text-align: center; }
+#smallipop.white .sipArrow { border-color: #fafafa transparent transparent transparent; }
+#smallipop.white .sipArrowBorder { border-color: #ccc transparent transparent transparent; }
+#smallipop.white.sipAlignBottom .sipArrow { border-color: transparent transparent #fafafa transparent; }
+#smallipop.white.sipAlignBottom .sipArrowBorder { border-color: transparent transparent #ccc transparent; }
+#smallipop.white.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent #fafafa; }
+#smallipop.white.sipPositionedLeft .sipArrowBorder { border-color: transparent transparent transparent #ccc; }
+#smallipop.white.sipPositionedRight .sipArrow { border-color: transparent #fafafa transparent transparent; }
+#smallipop.white.sipPositionedRight .sipArrowBorder { border-color: transparent #ccc transparent transparent; }
.boxshadow.rgba #smallipop.white { -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.borderradius #smallipop.white { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
-.borderradius #smallipop.white .bubbleContent { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
+.borderradius #smallipop.white .sipContent { border-radius: 12px; -o-border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; }
/* extension themes. keep at the bottom */
/* white theme extended, requires rgba support */
.rgba #smallipop.whiteTransparent { background-color: rgba(255, 255, 255, 0.8); }
-.rgba #smallipop.whiteTransparent .bubbleArrow { bottom: -21px; border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; }
-.rgba #smallipop.whiteTransparent .bubbleArrowBorder { border-color: transparent; }
-.rgba #smallipop.whiteTransparent.alignBottom .bubbleArrow { border-color: transparent transparent rgba(255, 255, 255, 0.8) transparent; }
-.rgba #smallipop.whiteTransparent.alignBottom .bubbleArrowBorder { border-color: transparent; }
-.rgba #smallipop.whiteTransparent.positionedLeft .bubbleArrow { border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); }
-.rgba #smallipop.whiteTransparent.positionedLeft .bubbleArrowBorder { border-color: transparent; }
-.rgba #smallipop.whiteTransparent.positionedRight .bubbleArrow { border-color: transparent rgba(255, 255, 255, 0.8) transparent transparent; }
-.rgba #smallipop.whiteTransparent.positionedRight .bubbleArrowBorder { border-color: transparent; }
+.rgba #smallipop.whiteTransparent .sipArrow { bottom: -21px; border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; }
+.rgba #smallipop.whiteTransparent .sipArrowBorder { border-color: transparent; }
+.rgba #smallipop.whiteTransparent.sipAlignBottom .sipArrow { top: -21px; border-color: transparent transparent rgba(255, 255, 255, 0.8) transparent; }
+.rgba #smallipop.whiteTransparent.sipPositionedLeft .sipArrow { border-color: transparent transparent transparent rgba(255, 255, 255, 0.8); }
+.rgba #smallipop.whiteTransparent.sipPositionedRight .sipArrow { border-color: transparent rgba(255, 255, 255, 0.8) transparent transparent; }
/* fat shadow extension theme */
.boxshadow.rgba #smallipop.fatShadow { -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8); }
View
0  lib/jquery-smallipop-0.1.min.js → lib/jquery-smallipop-0.1.1.min.js
File renamed without changes
View
18 lib/jquery-smallipop.js
@@ -97,7 +97,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
popup.removeClass().addClass(opt.theme).data({
beingShown: true,
shown: id
- }).find(".bubbleContent").html(self.data("hint") || self.find("." + opt.infoClass).html());
+ }).find(".sipContent").html(self.data("hint") || self.find("." + opt.infoClass).html());
offset = self.offset();
popupH = popup.outerHeight();
popupW = popup.outerWidth();
@@ -112,21 +112,21 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
xDistance = 0;
popupOffsetTop += selfHeight / 2 + popupH / 2;
if (offset.left + selfWidth + popupW > winWidth - windowPadding) {
- popup.addClass("positionedLeft");
+ popup.addClass("sipPositionedLeft");
popupOffsetLeft = offset.left - popupW - opt.popupOffset;
yDistance = -yDistance;
} else {
- popup.addClass("positionedRight");
+ popup.addClass("sipPositionedRight");
popupOffsetLeft = offset.left + selfWidth + opt.popupOffset;
}
} else {
yDistance = 0;
if (popupOffsetLeft + popupCenter > winWidth - windowPadding) {
popupOffsetLeft -= popupCenter * 2 - opt.popupOffset;
- popup.addClass("alignLeft");
+ popup.addClass("sipAlignLeft");
} else if (popupOffsetLeft - popupCenter < windowPadding) {
popupOffsetLeft -= opt.popupOffset;
- popup.addClass("alignRight");
+ popup.addClass("sipAlignRight");
} else {
popupOffsetLeft -= popupCenter;
}
@@ -134,7 +134,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
popupOffsetTop += popupH + selfHeight;
xDistance = -xDistance;
yOffset = 0;
- popup.addClass("alignBottom");
+ popup.addClass("sipAlignBottom");
}
}
if (opt.hideTrigger) {
@@ -186,7 +186,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
sip = $.smallipop;
popup = $("#smallipop");
if (!popup.length) {
- popup = sip.popup = $("<div id=\"smallipop\"><div class=\"bubbleContent\"/><div class=\"bubbleArrowBorder\"/><div class=\"bubbleArrow\"/></div>").css("opacity", 0).bind({
+ popup = sip.popup = $("<div id=\"smallipop\"><div class=\"sipContent\"/><div class=\"sipArrowBorder\"/><div class=\"sipArrow\"/></div>").css("opacity", 0).bind({
mouseover: sip.triggerMouseover,
mouseout: sip.triggerMouseout
});
@@ -196,10 +196,10 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
return this.each(function() {
var newId, self;
self = $(this);
- if (!self.hasClass("initialized")) {
+ if (!self.hasClass("sipInitialized")) {
sip = $.smallipop;
newId = sip.lastId++;
- self.addClass("initialized smallipop" + newId).data({
+ self.addClass("sipInitialized smallipop" + newId).data({
id: newId,
options: $.extend({}, sip.defaults, options),
hint: hint || self.attr("title") || ""
View
190 scss/jquery-smallipop.scss
@@ -1,6 +1,6 @@
@import "mixins";
-/* Bubbletip css */
+/* smallipop css */
.smallipopHint { display:none; }
@@ -13,58 +13,58 @@
z-index:9999;
max-width:400px;
- .bubbleContent { padding:10px; }
+ .sipContent { padding:10px; }
- .bubbleArrow, .bubbleArrowBorder {
+ .sipArrow, .sipArrowBorder {
position:absolute;
left:50%;
height:0; width:0;
}
- .bubbleArrow {
+ .sipArrow {
bottom:-20px;
margin-left:-10px;
border:10px solid transparent;
}
- .bubbleArrowBorder {
+ .sipArrowBorder {
bottom:-24px;
margin-left:-12px;
border:12px solid transparent;
}
- &.alignLeft {
- .bubbleArrow { margin-left:0; left:auto; right:20px; }
- .bubbleArrowBorder { margin-left:0; left:auto; right:18px; }
+ &.sipAlignLeft {
+ .sipArrow { margin-left:0; left:auto; right:20px; }
+ .sipArrowBorder { margin-left:0; left:auto; right:18px; }
}
- &.alignRight {
- .bubbleArrow { margin-left:0; left:20px; right:auto; }
- .bubbleArrowBorder { margin-left:0; left:18px; right:auto; }
+ &.sipAlignRight {
+ .sipArrow { margin-left:0; left:20px; right:auto; }
+ .sipArrowBorder { margin-left:0; left:18px; right:auto; }
}
- &.alignBottom {
- .bubbleArrow { bottom:auto; top:-20px; }
- .bubbleArrowBorder { bottom:auto; top:-24px; }
+ &.sipAlignBottom {
+ .sipArrow { bottom:auto; top:-20px; }
+ .sipArrowBorder { bottom:auto; top:-24px; }
}
- &.positionedLeft {
- .bubbleArrow,
- .bubbleArrowBorder {
+ &.sipPositionedLeft {
+ .sipArrow,
+ .sipArrowBorder {
right: -16px; left: auto; top:50%; bottom:auto;
border-width: 8px;
margin: -8px 0 0;
}
- .bubbleArrowBorder {
+ .sipArrowBorder {
right: -20px;
border-width: 10px;
margin: -10px 0 0;
}
}
- &.positionedRight {
- .bubbleArrow,
- .bubbleArrowBorder {
+ &.sipPositionedRight {
+ .sipArrow,
+ .sipArrowBorder {
left: -16px; right:auto; top:50%; bottom:auto;
border-width: 8px;
margin: -8px 0 0;
}
- .bubbleArrowBorder {
+ .sipArrowBorder {
left: -20px;
border-width: 10px;
margin: -10px 0 0;
@@ -77,25 +77,25 @@
/* default theme */
#smallipop.default {
text-shadow:0 -1px 1px #0f161e;
- .bubbleContent { border-top:1px solid #586d82; }
+ .sipContent { border-top:1px solid #586d82; }
a { text-shadow:0 -1px 1px #0f161e; }
- .bubbleArrow { border-color:#1a2634 transparent transparent transparent; }
- .bubbleArrowBorder { border-color:#0f161e transparent transparent transparent; }
+ .sipArrow { border-color:#1a2634 transparent transparent transparent; }
+ .sipArrowBorder { border-color:#0f161e transparent transparent transparent; }
- &.alignBottom {
- .bubbleArrow { border-color:transparent transparent #1a2634 transparent; }
- .bubbleArrowBorder { border-color:transparent transparent #0f161e transparent; }
+ &.sipAlignBottom {
+ .sipArrow { border-color:transparent transparent #1a2634 transparent; }
+ .sipArrowBorder { border-color:transparent transparent #0f161e transparent; }
}
- &.positionedLeft {
- .bubbleArrow { border-color:transparent transparent transparent #1a2634; }
- .bubbleArrowBorder { border-color:transparent transparent transparent #0f161e; }
+ &.sipPositionedLeft {
+ .sipArrow { border-color:transparent transparent transparent #1a2634; }
+ .sipArrowBorder { border-color:transparent transparent transparent #0f161e; }
}
- &.positionedRight {
- .bubbleArrow { border-color:transparent #1a2634 transparent transparent; }
- .bubbleArrowBorder { border-color:transparent #0f161e transparent transparent; }
+ &.sipPositionedRight {
+ .sipArrow { border-color:transparent #1a2634 transparent transparent; }
+ .sipArrowBorder { border-color:transparent #0f161e transparent transparent; }
}
}
.cssgradients.rgba #smallipop.default {
@@ -106,7 +106,7 @@
.boxshadow.rgba #smallipop.default { @include boxshadow(0 2px 6px rgba(0, 0, 0, 0.5));}
.borderradius #smallipop.default {
@include rounded(12px);
- .bubbleContent { @include rounded(12px); }
+ .sipContent { @include rounded(12px); }
}
/* blue theme */
@@ -118,25 +118,25 @@
a { color:#2276aa; }
- .bubbleContent {
+ .sipContent {
border: 0;
background: #fefefe;
}
- .bubbleArrow {
+ .sipArrow {
bottom: -30px;
border-color: #0064b4 transparent transparent transparent;
}
- &.alignBottom .bubbleArrow {
+ &.sipAlignBottom .sipArrow {
top: -30px;
border-color:transparent transparent #0064b4 transparent;
}
- &.positionedLeft .bubbleArrow {
+ &.sipPositionedLeft .sipArrow {
right: -26px;
border-color:transparent transparent transparent #0064b4;
}
- &.positionedRight .bubbleArrow {
+ &.sipPositionedRight .sipArrow {
left: -26px;
border-color:transparent #0064b4 transparent transparent;
}
@@ -144,10 +144,10 @@
.rgba #smallipop.blue {
border-color: rgba(0, 100, 180, 0.9);
- .bubbleArrow { border-color:rgba(0, 100, 180, 0.9) transparent transparent transparent; }
- &.alignBottom .bubbleArrow { border-color:transparent transparent rgba(0, 100, 180, 0.9) transparent; }
- &.positionedLeft .bubbleArrow { border-color:transparent transparent transparent rgba(0, 100, 180, 0.9); }
- &.positionedRight .bubbleArrow { border-color:transparent rgba(0, 100, 180, 0.9) transparent transparent; }
+ .sipArrow { border-color:rgba(0, 100, 180, 0.9) transparent transparent transparent; }
+ &.sipAlignBottom .sipArrow { border-color:transparent transparent rgba(0, 100, 180, 0.9) transparent; }
+ &.sipPositionedLeft .sipArrow { border-color:transparent transparent transparent rgba(0, 100, 180, 0.9); }
+ &.sipPositionedRight .sipArrow { border-color:transparent rgba(0, 100, 180, 0.9) transparent transparent; }
}
.boxshadow.rgba #smallipop.blue { @include boxshadow(0 2px 6px rgba(0, 0, 0, 0.5));}
.borderradius #smallipop.blue { @include rounded(7px); }
@@ -161,22 +161,22 @@
a { color: #eef8ff; text-shadow:0 -1px 1px #111; }
- .bubbleContent { border-top:1px solid #666; }
- .bubbleArrow { border-color:#222 transparent transparent transparent; }
- .bubbleArrowBorder { border-color:#111 transparent transparent transparent; }
+ .sipContent { border-top:1px solid #666; }
+ .sipArrow { border-color:#222 transparent transparent transparent; }
+ .sipArrowBorder { border-color:#111 transparent transparent transparent; }
- &.alignBottom {
- .bubbleArrow { border-color:transparent transparent #222 transparent; }
- .bubbleArrowBorder { border-color:transparent transparent #111 transparent; }
+ &.sipAlignBottom {
+ .sipArrow { border-color:transparent transparent #222 transparent; }
+ .sipArrowBorder { border-color:transparent transparent #111 transparent; }
}
- &.positionedLeft {
- .bubbleArrow { border-color:transparent transparent transparent #222; }
- .bubbleArrowBorder { border-color:transparent transparent transparent #111; }
+ &.sipPositionedLeft {
+ .sipArrow { border-color:transparent transparent transparent #222; }
+ .sipArrowBorder { border-color:transparent transparent transparent #111; }
}
- &.positionedRight {
- .bubbleArrow { border-color:transparent #222 transparent transparent; }
- .bubbleArrowBorder { border-color:transparent #111 transparent transparent; }
+ &.sipPositionedRight {
+ .sipArrow { border-color:transparent #222 transparent transparent; }
+ .sipArrowBorder { border-color:transparent #111 transparent transparent; }
}
}
.cssgradients #smallipop.black {
@@ -186,7 +186,7 @@
.boxshadow.rgba #smallipop.black { @include boxshadow(0 2px 6px rgba(0, 0, 0, 0.5));}
.borderradius #smallipop.black {
@include rounded(5px);
- .bubbleContent { @include rounded(5px); }
+ .sipContent { @include rounded(5px); }
}
/* orange theme */
@@ -198,22 +198,22 @@
a { color: #145d95; text-shadow:0 1px 1px #fff24d; }
- .bubbleContent { border-top:1px solid #fffabc; }
- .bubbleArrow { border-color:#f9aa18 transparent transparent transparent; }
- .bubbleArrowBorder { border-color:#e17500 transparent transparent transparent; }
+ .sipContent { border-top:1px solid #fffabc; }
+ .sipArrow { border-color:#f9aa18 transparent transparent transparent; }
+ .sipArrowBorder { border-color:#e17500 transparent transparent transparent; }
- &.alignBottom {
- .bubbleArrow { border-color:transparent transparent #f9aa18 transparent; }
- .bubbleArrowBorder { border-color:transparent transparent #e17500 transparent; }
+ &.sipAlignBottom {
+ .sipArrow { border-color:transparent transparent #f9aa18 transparent; }
+ .sipArrowBorder { border-color:transparent transparent #e17500 transparent; }
}
- &.positionedLeft {
- .bubbleArrow { border-color:transparent transparent transparent #f9c718; }
- .bubbleArrowBorder { border-color:transparent transparent transparent #e17500; }
+ &.sipPositionedLeft {
+ .sipArrow { border-color:transparent transparent transparent #f9c718; }
+ .sipArrowBorder { border-color:transparent transparent transparent #e17500; }
}
- &.positionedRight {
- .bubbleArrow { border-color:transparent #f9c718 transparent transparent; }
- .bubbleArrowBorder { border-color:transparent #e17500 transparent transparent; }
+ &.sipPositionedRight {
+ .sipArrow { border-color:transparent #f9c718 transparent transparent; }
+ .sipArrowBorder { border-color:transparent #e17500 transparent transparent; }
}
}
.cssgradients #smallipop.orange {
@@ -222,7 +222,7 @@
.boxshadow.rgba #smallipop.orange { @include boxshadow(0 2px 6px rgba(0, 0, 0, 0.5));}
.borderradius #smallipop.orange {
@include rounded(10px);
- .bubbleContent { @include rounded(10px); }
+ .sipContent { @include rounded(10px); }
}
/* white theme */
@@ -234,32 +234,32 @@
width:200px;
max-width:200px;
- .bubbleContent { text-align:center; }
- .bubbleArrow {
+ .sipContent { text-align:center; }
+ .sipArrow {
border-color:#fafafa transparent transparent transparent;
}
- .bubbleArrowBorder {
+ .sipArrowBorder {
border-color:#ccc transparent transparent transparent;
}
- &.alignBottom {
- .bubbleArrow { border-color:transparent transparent #fafafa transparent; }
- .bubbleArrowBorder { border-color:transparent transparent #ccc transparent; }
+ &.sipAlignBottom {
+ .sipArrow { border-color:transparent transparent #fafafa transparent; }
+ .sipArrowBorder { border-color:transparent transparent #ccc transparent; }
}
- &.positionedLeft {
- .bubbleArrow { border-color:transparent transparent transparent #fafafa; }
- .bubbleArrowBorder { border-color:transparent transparent transparent #ccc; }
+ &.sipPositionedLeft {
+ .sipArrow { border-color:transparent transparent transparent #fafafa; }
+ .sipArrowBorder { border-color:transparent transparent transparent #ccc; }
}
- &.positionedRight {
- .bubbleArrow { border-color:transparent #fafafa transparent transparent; }
- .bubbleArrowBorder { border-color:transparent #ccc transparent transparent; }
+ &.sipPositionedRight {
+ .sipArrow { border-color:transparent #fafafa transparent transparent; }
+ .sipArrowBorder { border-color:transparent #ccc transparent transparent; }
}
}
.boxshadow.rgba #smallipop.white { @include boxshadow(0 2px 6px rgba(0, 0, 0, 0.5));}
.borderradius #smallipop.white {
@include rounded(12px);
- .bubbleContent { @include rounded(12px); }
+ .sipContent { @include rounded(12px); }
}
/* extension themes. keep at the bottom */
@@ -267,27 +267,15 @@
/* white theme extended, requires rgba support */
.rgba #smallipop.whiteTransparent {
background-color:rgba(255, 255, 255, 0.8);
- .bubbleArrow {
+ .sipArrow {
bottom:-21px;
border-color:rgba(255, 255, 255, 0.8) transparent transparent transparent;
}
- .bubbleArrowBorder {
- border-color:transparent;
- }
-
- &.alignBottom {
- .bubbleArrow { border-color:transparent transparent rgba(255, 255, 255, 0.8) transparent; }
- .bubbleArrowBorder { border-color:transparent; }
- }
-
- &.positionedLeft {
- .bubbleArrow { border-color:transparent transparent transparent rgba(255, 255, 255, 0.8); }
- .bubbleArrowBorder { border-color:transparent; }
- }
- &.positionedRight {
- .bubbleArrow { border-color:transparent rgba(255, 255, 255, 0.8) transparent transparent; }
- .bubbleArrowBorder { border-color:transparent; }
- }
+ .sipArrowBorder { border-color:transparent; }
+
+ &.sipAlignBottom .sipArrow { top:-21px; border-color:transparent transparent rgba(255, 255, 255, 0.8) transparent; }
+ &.sipPositionedLeft .sipArrow { border-color:transparent transparent transparent rgba(255, 255, 255, 0.8); }
+ &.sipPositionedRight .sipArrow { border-color:transparent rgba(255, 255, 255, 0.8) transparent transparent; }
}
View
18 src/jquery-smallipop.coffee
@@ -98,7 +98,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
.data
beingShown: true
shown: id
- .find(".bubbleContent").html(self.data("hint") or self.find(".#{opt.infoClass}").html())
+ .find(".sipContent").html(self.data("hint") or self.find(".#{opt.infoClass}").html())
# Get new dimensions
offset = self.offset()
@@ -117,23 +117,23 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
popupOffsetTop += selfHeight / 2 + popupH / 2
if offset.left + selfWidth + popupW > winWidth - windowPadding
# Positioned left
- popup.addClass("positionedLeft")
+ popup.addClass("sipPositionedLeft")
popupOffsetLeft = offset.left - popupW - opt.popupOffset
yDistance = -yDistance
else
# Positioned right
- popup.addClass("positionedRight")
+ popup.addClass("sipPositionedRight")
popupOffsetLeft = offset.left + selfWidth + opt.popupOffset
else
yDistance = 0
if popupOffsetLeft + popupCenter > winWidth - windowPadding
# Aligned left
popupOffsetLeft -= popupCenter * 2 - opt.popupOffset
- popup.addClass("alignLeft")
+ popup.addClass("sipAlignLeft")
else if popupOffsetLeft - popupCenter < windowPadding
# Aligned right
popupOffsetLeft -= opt.popupOffset
- popup.addClass("alignRight")
+ popup.addClass("sipAlignRight")
else
# Centered
popupOffsetLeft -= popupCenter
@@ -143,7 +143,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
popupOffsetTop += popupH + selfHeight
xDistance = -xDistance
yOffset = 0
- popup.addClass("alignBottom")
+ popup.addClass("sipAlignBottom")
# Hide trigger if defined
$(".smallipop#{id}").stop(true).fadeTo(opt.hideSpeed, 0) if opt.hideTrigger
@@ -187,7 +187,7 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
# Initialize puff tooltip if necessary
popup = $("#smallipop")
unless popup.length
- popup = sip.popup = $("<div id=\"smallipop\"><div class=\"bubbleContent\"/><div class=\"bubbleArrowBorder\"/><div class=\"bubbleArrow\"/></div>")
+ popup = sip.popup = $("<div id=\"smallipop\"><div class=\"sipContent\"/><div class=\"sipArrowBorder\"/><div class=\"sipArrow\"/></div>")
.css("opacity", 0)
.bind
mouseover: sip.triggerMouseover
@@ -201,11 +201,11 @@ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) lice
return @.each ->
# Initialize each trigger, create id and bind events
self = $(@)
- unless self.hasClass("initialized")
+ unless self.hasClass("sipInitialized")
sip = $.smallipop
newId = sip.lastId++
self
- .addClass("initialized smallipop#{newId}")
+ .addClass("sipInitialized smallipop#{newId}")
.data
id: newId
options: $.extend({}, sip.defaults, options)
Please sign in to comment.
Something went wrong with that request. Please try again.