angularjs-tooltips
Advanced tools
Comparing version 1.0.0 to 1.0.1
{ | ||
"name": "angular-tooltips", | ||
"description": "Tooltip Directive For AngularJS", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"homepage": "https://github.com/intellipharm/angular-tooltips", | ||
@@ -6,0 +6,0 @@ "repository": { |
@@ -7,3 +7,5 @@ (function() { | ||
restrict: 'A', | ||
scope: true, | ||
scope: { | ||
title: '@' | ||
}, | ||
link: function ($scope, element, attrs) { | ||
@@ -16,19 +18,34 @@ // adds the tooltip to the body | ||
// create the tooltip | ||
var tooltip = angular.element('<div>') | ||
.addClass('angular-tooltip angular-tooltip-' + direction) | ||
.html(attrs.title || attrs.tooltip); | ||
$scope.tooltipElement = angular.element('<div>') | ||
.addClass('angular-tooltip angular-tooltip-' + direction); | ||
// append to the body | ||
angular.element(document).find('body').append(tooltip); | ||
angular.element(document).find('body').append($scope.tooltipElement); | ||
// position the tooltip | ||
var css = $scope.calculatePosition(tooltip, direction); | ||
$scope.updateTooltip(attrs.title || attrs.tooltip); | ||
tooltip.css(css); | ||
// fade in | ||
tooltip.addClass('angular-tooltip-fade-in'); | ||
$scope.tooltipElement.addClass('angular-tooltip-fade-in'); | ||
} | ||
}; | ||
$scope.updateTooltip = function(title) { | ||
$scope.tooltipElement.html(title); | ||
var css = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection()); | ||
$scope.tooltipElement.css(css); | ||
// stop the standard tooltip from being shown | ||
$timeout(function () { | ||
element.removeAttr('ng-attr-title'); | ||
element.removeAttr('title'); | ||
}); | ||
}; | ||
$scope.$watch('title', function(newTitle) { | ||
if($scope.tooltipElement) { | ||
$scope.updateTooltip(newTitle); | ||
} | ||
}); | ||
// removes all tooltips from the document to reduce ghosts | ||
@@ -129,8 +146,2 @@ $scope.removeTooltip = function () { | ||
if (attrs.title || attrs.tooltip) { | ||
// stop the standard tooltip from being shown | ||
$timeout(function () { | ||
element.removeAttr('ng-attr-title'); | ||
element.removeAttr('title'); | ||
}); | ||
// attach events to show tooltip | ||
@@ -137,0 +148,0 @@ element.on('mouseover', $scope.createTooltip); |
@@ -1,1 +0,1 @@ | ||
!function(){"use strict";var t=function(t){return{restrict:"A",scope:!0,link:function(e,o,i){e.createTooltip=function(t){if(i.title||i.tooltip){var o=e.getDirection(),l=angular.element("<div>").addClass("angular-tooltip angular-tooltip-"+o).html(i.title||i.tooltip);angular.element(document).find("body").append(l);var r=e.calculatePosition(l,o);l.css(r),l.addClass("angular-tooltip-fade-in")}},e.removeTooltip=function(){var t=angular.element(document.querySelectorAll(".angular-tooltip"));t.remove()},e.getDirection=function(){return o.attr("tooltip-direction")||o.attr("title-direction")||"top"},e.calculatePosition=function(t,e){var i=t[0].getBoundingClientRect(),l=o[0].getBoundingClientRect(),r=window.scrollX||document.documentElement.scrollLeft,p=window.scrollY||document.documentElement.scrollTop,n=12;switch(e){case"top":case"top-center":case"top-middle":return{left:l.left+l.width/2-i.width/2+r+"px",top:l.top-i.height-n/2+p+"px"};case"top-right":return{left:l.left+l.width-n+r+"px",top:l.top-i.height-n/2+p+"px"};case"right-top":return{left:l.left+l.width+n/2+r+"px",top:l.top-i.height+n+p+"px"};case"right":case"right-center":case"right-middle":return{left:l.left+l.width+n/2+r+"px",top:l.top+l.height/2-i.height/2+p+"px"};case"right-bottom":return{left:l.left+l.width+n/2+r+"px",top:l.top+l.height-n+p+"px"};case"bottom-right":return{left:l.left+l.width-n+r+"px",top:l.top+l.height+n/2+p+"px"};case"bottom":case"bottom-center":case"bottom-middle":return{left:l.left+l.width/2-i.width/2+r+"px",top:l.top+l.height+n/2+p+"px"};case"bottom-left":return{left:l.left-i.width+n+r+"px",top:l.top+l.height+n/2+p+"px"};case"left-bottom":return{left:l.left-i.width-n/2+r+"px",top:l.top+l.height-n+p+"px"};case"left":case"left-center":case"left-middle":return{left:l.left-i.width-n/2+r+"px",top:l.top+l.height/2-i.height/2+p+"px"};case"left-top":return{left:l.left-i.width-n/2+r+"px",top:l.top-i.height+n+p+"px"};case"top-left":return{left:l.left-i.width+n+r+"px",top:l.top-i.height-n/2+p+"px"}}},i.title||i.tooltip?(t(function(){o.removeAttr("ng-attr-title"),o.removeAttr("title")}),o.on("mouseover",e.createTooltip),o.on("mouseout",e.removeTooltip)):(o.off("mouseover",e.createTooltip),o.off("mouseout",e.removeTooltip)),o.on("destroy",e.removeTooltip),e.$on("$destroy",e.removeTooltip)}}};t.$inject=["$timeout"],angular.module("tooltips",[]).directive("title",t).directive("tooltip",t)}(); | ||
!function(){"use strict";var t=function(t){return{restrict:"A",scope:{title:"@"},link:function(e,o,i){e.createTooltip=function(t){if(i.title||i.tooltip){var o=e.getDirection();e.tooltipElement=angular.element("<div>").addClass("angular-tooltip angular-tooltip-"+o),angular.element(document).find("body").append(e.tooltipElement),e.updateTooltip(i.title||i.tooltip),e.tooltipElement.addClass("angular-tooltip-fade-in")}},e.updateTooltip=function(i){e.tooltipElement.html(i);var l=e.calculatePosition(e.tooltipElement,e.getDirection());e.tooltipElement.css(l),t(function(){o.removeAttr("ng-attr-title"),o.removeAttr("title")})},e.$watch("title",function(t){e.tooltipElement&&e.updateTooltip(t)}),e.removeTooltip=function(){var t=angular.element(document.querySelectorAll(".angular-tooltip"));t.remove()},e.getDirection=function(){return o.attr("tooltip-direction")||o.attr("title-direction")||"top"},e.calculatePosition=function(t,e){var i=t[0].getBoundingClientRect(),l=o[0].getBoundingClientRect(),p=window.scrollX||document.documentElement.scrollLeft,n=window.scrollY||document.documentElement.scrollTop,r=12;switch(e){case"top":case"top-center":case"top-middle":return{left:l.left+l.width/2-i.width/2+p+"px",top:l.top-i.height-r/2+n+"px"};case"top-right":return{left:l.left+l.width-r+p+"px",top:l.top-i.height-r/2+n+"px"};case"right-top":return{left:l.left+l.width+r/2+p+"px",top:l.top-i.height+r+n+"px"};case"right":case"right-center":case"right-middle":return{left:l.left+l.width+r/2+p+"px",top:l.top+l.height/2-i.height/2+n+"px"};case"right-bottom":return{left:l.left+l.width+r/2+p+"px",top:l.top+l.height-r+n+"px"};case"bottom-right":return{left:l.left+l.width-r+p+"px",top:l.top+l.height+r/2+n+"px"};case"bottom":case"bottom-center":case"bottom-middle":return{left:l.left+l.width/2-i.width/2+p+"px",top:l.top+l.height+r/2+n+"px"};case"bottom-left":return{left:l.left-i.width+r+p+"px",top:l.top+l.height+r/2+n+"px"};case"left-bottom":return{left:l.left-i.width-r/2+p+"px",top:l.top+l.height-r+n+"px"};case"left":case"left-center":case"left-middle":return{left:l.left-i.width-r/2+p+"px",top:l.top+l.height/2-i.height/2+n+"px"};case"left-top":return{left:l.left-i.width-r/2+p+"px",top:l.top-i.height+r+n+"px"};case"top-left":return{left:l.left-i.width+r+p+"px",top:l.top-i.height-r/2+n+"px"}}},i.title||i.tooltip?(o.on("mouseover",e.createTooltip),o.on("mouseout",e.removeTooltip)):(o.off("mouseover",e.createTooltip),o.off("mouseout",e.removeTooltip)),o.on("destroy",e.removeTooltip),e.$on("$destroy",e.removeTooltip)}}};t.$inject=["$timeout"],angular.module("tooltips",[]).directive("title",t).directive("tooltip",t)}(); |
{ | ||
"name": "angularjs-tooltips", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"license": "MIT", | ||
@@ -5,0 +5,0 @@ "main": "dist/angular-tooltips.js", |
@@ -7,3 +7,5 @@ (function() { | ||
restrict: 'A', | ||
scope: true, | ||
scope: { | ||
title: '@' | ||
}, | ||
link: function ($scope, element, attrs) { | ||
@@ -16,19 +18,34 @@ // adds the tooltip to the body | ||
// create the tooltip | ||
var tooltip = angular.element('<div>') | ||
.addClass('angular-tooltip angular-tooltip-' + direction) | ||
.html(attrs.title || attrs.tooltip); | ||
$scope.tooltipElement = angular.element('<div>') | ||
.addClass('angular-tooltip angular-tooltip-' + direction); | ||
// append to the body | ||
angular.element(document).find('body').append(tooltip); | ||
angular.element(document).find('body').append($scope.tooltipElement); | ||
// position the tooltip | ||
var css = $scope.calculatePosition(tooltip, direction); | ||
$scope.updateTooltip(attrs.title || attrs.tooltip); | ||
tooltip.css(css); | ||
// fade in | ||
tooltip.addClass('angular-tooltip-fade-in'); | ||
$scope.tooltipElement.addClass('angular-tooltip-fade-in'); | ||
} | ||
}; | ||
$scope.updateTooltip = function(title) { | ||
$scope.tooltipElement.html(title); | ||
var css = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection()); | ||
$scope.tooltipElement.css(css); | ||
// stop the standard tooltip from being shown | ||
$timeout(function () { | ||
element.removeAttr('ng-attr-title'); | ||
element.removeAttr('title'); | ||
}); | ||
}; | ||
$scope.$watch('title', function(newTitle) { | ||
if($scope.tooltipElement) { | ||
$scope.updateTooltip(newTitle); | ||
} | ||
}); | ||
// removes all tooltips from the document to reduce ghosts | ||
@@ -129,8 +146,2 @@ $scope.removeTooltip = function () { | ||
if (attrs.title || attrs.tooltip) { | ||
// stop the standard tooltip from being shown | ||
$timeout(function () { | ||
element.removeAttr('ng-attr-title'); | ||
element.removeAttr('title'); | ||
}); | ||
// attach events to show tooltip | ||
@@ -137,0 +148,0 @@ element.on('mouseover', $scope.createTooltip); |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
62776
620