Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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.