diff --git a/src/css/angular-tooltips.css b/src/css/angular-tooltips.css index de3543e..ab9b770 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 transparent; } -._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; + border-bottom-color: transparent; + 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; + border-bottom-color: transparent; + 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; + border-bottom-color: transparent; + 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; + border-bottom-color: transparent; + 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; + border-left-color: transparent; + 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; + border-left-color: transparent; + 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; + 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; + border-left-color: transparent; + border-top-width: 0; } diff --git a/src/js/angular-tooltips.js b/src/js/angular-tooltips.js index aff9872..80608e5 100644 --- a/src/js/angular-tooltips.js +++ b/src/js/angular-tooltips.js @@ -26,13 +26,15 @@ , width , offsetTop , offsetLeft - , title = attr.title || '' + , title = attr.tooltipTitle || attr.title || '' , content = attr.tooltipContent || '' , showTriggers = attr.tooltipShowTrigger || 'mouseenter mouseover' , hideTriggers = attr.tooltipHideTrigger || 'mouseleave mouseout' , 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 || '' + , lazyMode = $scope.$eval(attr.tooltipLazy || true) , htmlTemplate = '
' + '
' + title + '
' + content + ' ' + @@ -40,6 +42,9 @@ //create the tooltip theTooltip = $compile(htmlTemplate)($scope); + + theTooltip.addClass(className); + body.append(theTooltip); $scope.initTooltip = function getInfos (tooltipSide) { @@ -77,7 +82,7 @@ thisElement.bind(showTriggers, function onMouseEnterAndMouseOver() { - if (!initialized) { + if (!lazyMode || !initialized) { initialized = true; $scope.initTooltip(side);