Merge pull request #6 from KynoYang/for-beary

add class scope, re-init before showing, rich triangle

Author: 45kb

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;
 }

src/js/angular-tooltips.js

@@ -26,20 +26,25 @@
           , 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 = '<div class="_720kb-tooltip _720kb-tooltip-' + side + ' _720kb-tooltip-' + size + '">' +
                 '<div class="_720kb-tooltip-title"> ' + title + '</div>' +
                 content + ' <span class="_720kb-tooltip-caret"></span>' +
               '</div>';
 
         //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);