From e362bafbc7e5e3d2d580e06c4587033fd8f9c80e Mon Sep 17 00:00:00 2001 From: Kai Yang Date: Fri, 16 Jan 2015 14:50:08 +0800 Subject: [PATCH 1/6] add class scope, re-init before showing, rich triangle --- src/css/angular-tooltips.css | 75 ++++++++++++++++++++++++++++-------- src/js/angular-tooltips.js | 13 +++---- 2 files changed, 64 insertions(+), 24 deletions(-) diff --git a/src/css/angular-tooltips.css b/src/css/angular-tooltips.css index de3543e..1086fa1 100644 --- a/src/css/angular-tooltips.css +++ b/src/css/angular-tooltips.css @@ -36,44 +36,87 @@ transition: opacity 0.2s linear; opacity: 1; } +._720kb-tooltip-caret:before { + content:''; + position: absolute; + width: 0; + height: 0; + border: 6px solid rgba(0, 0, 0, 0.8); +} ._720kb-tooltip-caret:after { content:''; position: absolute; width: 0; height: 0; + border: 5px solid rgba(0, 0, 0, 0.8); } -._720kb-tooltip-left ._720kb-tooltip-caret:after { +._720kb-tooltip-left ._720kb-tooltip-caret:before { top: 50%; left: 100%; margin-left:0; margin-top: -6px; - border-left: 6px solid rgba(0, 0, 0, 0.8); - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + border-right-width: 0; } -._720kb-tooltip-right ._720kb-tooltip-caret:after { +._720kb-tooltip-left ._720kb-tooltip-caret:after { + top: 50%; + left: 100%; + margin-left:0; + margin-top: -5px; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + border-right-width: 0; +} +._720kb-tooltip-right ._720kb-tooltip-caret:before { top: 50%; left:0; margin-left:-6px; margin-top: -6px; - border-right: 6px solid rgba(0, 0, 0, 0.8); - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + border-left-width: 0; } -._720kb-tooltip-top ._720kb-tooltip-caret:after { +._720kb-tooltip-right ._720kb-tooltip-caret:after { + top: 50%; + left:0; + margin-left:-5px; + margin-top: -5px; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + border-left-width: 0; +} +._720kb-tooltip-top ._720kb-tooltip-caret:before { top: 100%; left: 50%; margin-left: -6px; margin-bottom:-6px; - border-top: 6px solid rgba(0, 0, 0, 0.8); - border-right: 6px solid transparent; - border-left: 6px solid transparent; + border-right-color: transparent !important; + border-left-color: transparent !important; + border-bottom-width: 0; } -._720kb-tooltip-bottom ._720kb-tooltip-caret:after { +._720kb-tooltip-top ._720kb-tooltip-caret:after { + top: 100%; + left: 50%; + margin-left: -5px; + margin-bottom:-5px; + border-right-color: transparent !important; + border-left-color: transparent !important; + border-bottom-width: 0; +} +._720kb-tooltip-bottom ._720kb-tooltip-caret:before { bottom: 100%; left: 50%; margin-left: -6px; - border-bottom: 6px solid rgba(0, 0, 0, 0.8); - border-right: 6px solid transparent; - border-left: 6px solid transparent; + border-right-color: transparent !important; + border-left-color: transparent !important; + border-top-width: 0; +} +._720kb-tooltip-bottom ._720kb-tooltip-caret:after { + bottom: 100%; + left: 50%; + margin-left: -5px; + border-right-color: transparent !important; + border-left-color: transparent !important; + border-top-width: 0; } diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index aff9872..e860c7f 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -26,7 +26,7 @@ , width , offsetTop , offsetLeft - , title = attr.title || '' + , title = attr.tooltipTitle || '' , content = attr.tooltipContent || '' , showTriggers = attr.tooltipShowTrigger || 'mouseenter mouseover' , hideTriggers = attr.tooltipHideTrigger || 'mouseleave mouseout' @@ -36,10 +36,12 @@ , htmlTemplate = '
' + '
' + title + '
' + content + ' ' + - '
'; + '' + , className = attr.tooltipClass || ''; //create the tooltip theTooltip = $compile(htmlTemplate)($scope); + theTooltip.addClass(className); body.append(theTooltip); $scope.initTooltip = function getInfos (tooltipSide) { @@ -77,12 +79,7 @@ thisElement.bind(showTriggers, function onMouseEnterAndMouseOver() { - if (!initialized) { - - initialized = true; - $scope.initTooltip(side); - } - + $scope.initTooltip(side); $scope.showTooltip(); }); From 65276ab9c2c3fa167ec151826c89faeed84f95f9 Mon Sep 17 00:00:00 2001 From: Kai Yang Date: Sat, 17 Jan 2015 12:59:36 +0800 Subject: [PATCH 2/6] clear code --- src/js/angular-tooltips.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index e860c7f..32c6977 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -33,15 +33,17 @@ , side = attr.tooltipSide || 'top' , size = attr.tooltipSize || 'medium' , tryPosition = attr.tooltipTry || 1 // If set into 0 , the auto-position method will not call + , className = attr.tooltipClass || '' , htmlTemplate = '
' + '
' + title + '
' + content + ' ' + - '
' - , className = attr.tooltipClass || ''; + ''; //create the tooltip theTooltip = $compile(htmlTemplate)($scope); + theTooltip.addClass(className); + body.append(theTooltip); $scope.initTooltip = function getInfos (tooltipSide) { From f2e9a48664cbc529297a16f53321856de2c25679 Mon Sep 17 00:00:00 2001 From: Kai Yang Date: Sat, 17 Jan 2015 20:48:41 +0800 Subject: [PATCH 3/6] let title inherit from title attribute when tooltipTitle is undifined --- src/js/angular-tooltips.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index 32c6977..9a1ac92 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -26,7 +26,7 @@ , width , offsetTop , offsetLeft - , title = attr.tooltipTitle || '' + , title = attr.tooltipTitle || attr.title || '' , content = attr.tooltipContent || '' , showTriggers = attr.tooltipShowTrigger || 'mouseenter mouseover' , hideTriggers = attr.tooltipHideTrigger || 'mouseleave mouseout' From 9eff967ac6dee6fe029d1ae31edbafe7f82ffc80 Mon Sep 17 00:00:00 2001 From: Kai Yang Date: Sun, 18 Jan 2015 00:12:40 +0800 Subject: [PATCH 4/6] remove and set 'after' color transparent --- src/css/angular-tooltips.css | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/css/angular-tooltips.css b/src/css/angular-tooltips.css index 1086fa1..ab9b770 100644 --- a/src/css/angular-tooltips.css +++ b/src/css/angular-tooltips.css @@ -48,15 +48,15 @@ position: absolute; width: 0; height: 0; - border: 5px solid rgba(0, 0, 0, 0.8); + border: 5px solid transparent; } ._720kb-tooltip-left ._720kb-tooltip-caret:before { top: 50%; left: 100%; margin-left:0; margin-top: -6px; - border-top-color: transparent !important; - border-bottom-color: transparent !important; + border-top-color: transparent; + border-bottom-color: transparent; border-right-width: 0; } ._720kb-tooltip-left ._720kb-tooltip-caret:after { @@ -64,8 +64,8 @@ left: 100%; margin-left:0; margin-top: -5px; - border-top-color: transparent !important; - border-bottom-color: transparent !important; + border-top-color: transparent; + border-bottom-color: transparent; border-right-width: 0; } ._720kb-tooltip-right ._720kb-tooltip-caret:before { @@ -73,8 +73,8 @@ left:0; margin-left:-6px; margin-top: -6px; - border-top-color: transparent !important; - border-bottom-color: transparent !important; + border-top-color: transparent; + border-bottom-color: transparent; border-left-width: 0; } ._720kb-tooltip-right ._720kb-tooltip-caret:after { @@ -82,8 +82,8 @@ left:0; margin-left:-5px; margin-top: -5px; - border-top-color: transparent !important; - border-bottom-color: transparent !important; + border-top-color: transparent; + border-bottom-color: transparent; border-left-width: 0; } ._720kb-tooltip-top ._720kb-tooltip-caret:before { @@ -91,8 +91,8 @@ left: 50%; margin-left: -6px; margin-bottom:-6px; - border-right-color: transparent !important; - border-left-color: transparent !important; + border-right-color: transparent; + border-left-color: transparent; border-bottom-width: 0; } ._720kb-tooltip-top ._720kb-tooltip-caret:after { @@ -100,23 +100,23 @@ left: 50%; margin-left: -5px; margin-bottom:-5px; - border-right-color: transparent !important; - border-left-color: transparent !important; + border-right-color: transparent; + border-left-color: transparent; border-bottom-width: 0; } ._720kb-tooltip-bottom ._720kb-tooltip-caret:before { bottom: 100%; left: 50%; margin-left: -6px; - border-right-color: transparent !important; - border-left-color: transparent !important; + border-right-color: transparent; + border-left-color: transparent; border-top-width: 0; } ._720kb-tooltip-bottom ._720kb-tooltip-caret:after { bottom: 100%; left: 50%; margin-left: -5px; - border-right-color: transparent !important; - border-left-color: transparent !important; + border-right-color: transparent; + border-left-color: transparent; border-top-width: 0; } From 0fe47c999d3ae2af8b2bd894adadec43ee38b55a Mon Sep 17 00:00:00 2001 From: Kai Yang Date: Sun, 18 Jan 2015 00:25:06 +0800 Subject: [PATCH 5/6] add tooltipLazy to scope --- src/js/angular-tooltips.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index 9a1ac92..57a9859 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -34,6 +34,7 @@ , size = attr.tooltipSize || 'medium' , tryPosition = attr.tooltipTry || 1 // If set into 0 , the auto-position method will not call , className = attr.tooltipClass || '' + , lazyMode = attr.tooltipLazy || true , htmlTemplate = '
' + '
' + title + '
' + content + ' ' + @@ -81,7 +82,12 @@ thisElement.bind(showTriggers, function onMouseEnterAndMouseOver() { - $scope.initTooltip(side); + if (!lazyMode || !initialized) { + + initialized = true; + $scope.initTooltip(side); + } + $scope.showTooltip(); }); From a8020df603d2de2281a25260a85b431262c204e0 Mon Sep 17 00:00:00 2001 From: Kai Yang Date: Sun, 18 Jan 2015 00:45:58 +0800 Subject: [PATCH 6/6] boolean value should be evaluated --- src/js/angular-tooltips.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index 57a9859..80608e5 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -34,7 +34,7 @@ , size = attr.tooltipSize || 'medium' , tryPosition = attr.tooltipTry || 1 // If set into 0 , the auto-position method will not call , className = attr.tooltipClass || '' - , lazyMode = attr.tooltipLazy || true + , lazyMode = $scope.$eval(attr.tooltipLazy || true) , htmlTemplate = '
' + '
' + title + '
' + content + ' ' +