From ce8b9e69e7d3a6e4ca1fcad733626a442fc01626 Mon Sep 17 00:00:00 2001 From: Sebastian Helzle Date: Tue, 11 Oct 2011 00:47:21 +0200 Subject: [PATCH] Prefixed class names to avoid conflicts and fixed css bug in white transparent theme. --- css/jquery-smallipop.css | 141 +++++++------ ...1.min.js => jquery-smallipop-0.1.1.min.js} | 0 lib/jquery-smallipop.js | 18 +- scss/jquery-smallipop.scss | 190 ++++++++---------- src/jquery-smallipop.coffee | 18 +- 5 files changed, 176 insertions(+), 191 deletions(-) rename lib/{jquery-smallipop-0.1.min.js => jquery-smallipop-0.1.1.min.js} (100%) diff --git a/css/jquery-smallipop.css b/css/jquery-smallipop.css index add27b6..fdb5795 100644 --- a/css/jquery-smallipop.css +++ b/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); } diff --git a/lib/jquery-smallipop-0.1.min.js b/lib/jquery-smallipop-0.1.1.min.js similarity index 100% rename from lib/jquery-smallipop-0.1.min.js rename to lib/jquery-smallipop-0.1.1.min.js diff --git a/lib/jquery-smallipop.js b/lib/jquery-smallipop.js index 7c82545..2d696be 100644 --- a/lib/jquery-smallipop.js +++ b/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 = $("
").css("opacity", 0).bind({ + popup = sip.popup = $("
").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") || "" diff --git a/scss/jquery-smallipop.scss b/scss/jquery-smallipop.scss index 2b74186..e6ab280 100644 --- a/scss/jquery-smallipop.scss +++ b/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; } } diff --git a/src/jquery-smallipop.coffee b/src/jquery-smallipop.coffee index be1225f..5ed8cf9 100644 --- a/src/jquery-smallipop.coffee +++ b/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 = $("
") + popup = sip.popup = $("
") .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)