New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

angularjs-tooltips

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angularjs-tooltips - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

2

bower.json
{
"name": "angular-tooltips",
"description": "Tooltip Directive For AngularJS",
"version": "1.0.3",
"version": "1.0.4",
"homepage": "https://github.com/intellipharm/angular-tooltips",

@@ -6,0 +6,0 @@ "repository": {

@@ -8,3 +8,4 @@ (function() {

scope: {
title: '@'
title: '@',
fixedPosition: '=',
},

@@ -18,4 +19,3 @@ link: function ($scope, element, attrs) {

// create the tooltip
$scope.tooltipElement = angular.element('<div>')
.addClass('angular-tooltip angular-tooltip-' + direction);
$scope.tooltipElement = angular.element('<div>').addClass('angular-tooltip');

@@ -25,2 +25,3 @@ // append to the body

// update the contents and position
$scope.updateTooltip(attrs.title || attrs.tooltip);

@@ -34,8 +35,11 @@

$scope.updateTooltip = function(title) {
// insert html into tooltip
$scope.tooltipElement.html(title);
// compile html contents into angularjs
$compile($scope.tooltipElement.contents())($scope);
var css = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection());
$scope.tooltipElement.css(css);
// calculate the position of the tooltip
var pos = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection());
$scope.tooltipElement.addClass('angular-tooltip-' + pos.direction).css(pos);

@@ -49,2 +53,3 @@ // stop the standard tooltip from being shown

// if the title changes the update the tooltip
$scope.$watch('title', function(newTitle) {

@@ -71,2 +76,3 @@ if ($scope.tooltipElement) {

// calculates the position of the tooltip
$scope.calculatePosition = function(tooltip, direction) {

@@ -78,75 +84,65 @@ var tooltipBounding = tooltip[0].getBoundingClientRect();

var arrow_padding = 12;
var pos = {};
var newDirection = null;
switch (direction) {
case 'top':
case 'top-center':
case 'top-middle':
return {
left: elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
};
case 'top-right':
return {
left: elBounding.left + elBounding.width - arrow_padding + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
};
case 'right-top':
return {
left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height + arrow_padding + scrollTop + 'px',
};
case 'right':
case 'right-center':
case 'right-middle':
return {
left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop + 'px',
};
case 'right-bottom':
return {
left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top + elBounding.height - arrow_padding + scrollTop + 'px',
};
case 'bottom-right':
return {
left: elBounding.left + elBounding.width - arrow_padding + scrollLeft + 'px',
top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
};
case 'bottom':
case 'bottom-center':
case 'bottom-middle':
return {
left: elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft + 'px',
top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
};
case 'bottom-left':
return {
left: elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft + 'px',
top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
};
case 'left-bottom':
return {
left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top + elBounding.height - arrow_padding + scrollTop + 'px',
};
case 'left':
case 'left-center':
case 'left-middle':
return {
left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop + 'px',
};
case 'left-top':
return {
left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height + arrow_padding + scrollTop + 'px',
};
case 'top-left':
return {
left: elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
};
// calculate the left position
if ($scope.stringStartsWith(direction, 'left')) {
pos.left = elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft;
} else if ($scope.stringStartsWith(direction, 'right')) {
pos.left = elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft;
} else if ($scope.stringContains(direction, 'left')) {
pos.left = elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft;
} else if ($scope.stringContains(direction, 'right')) {
pos.left = elBounding.left + elBounding.width - arrow_padding + scrollLeft;
} else {
pos.left = elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft;
}
// calculate the top position
if ($scope.stringStartsWith(direction, 'top')) {
pos.top = elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop;
} else if ($scope.stringStartsWith(direction, 'bottom')) {
pos.top = elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop;
} else if ($scope.stringContains(direction, 'top')) {
pos.top = elBounding.top - tooltipBounding.height + arrow_padding + scrollTop;
} else if ($scope.stringContains(direction, 'bottom')) {
pos.top = elBounding.top + elBounding.height - arrow_padding + scrollTop;
} else {
pos.top = elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop;
}
// check if the tooltip is outside the bounds of the window
if ($scope.fixedPosition) {
if (pos.left < scrollLeft) {
newDirection = direction.replace('left', 'right');
} else if ((pos.left + tooltipBounding.width) > (window.innerWidth + scrollLeft)) {
newDirection = direction.replace('right', 'left');
}
if (pos.top < scrollTop) {
newDirection = direction.replace('top', 'bottom');
} else if ((pos.top + tooltipBounding.height) > (window.innerHeight + scrollTop)) {
newDirection = direction.replace('bottom', 'top');
}
if (newDirection) {
return $scope.calculatePosition(tooltip, newDirection);
}
}
pos.left += 'px';
pos.top += 'px';
pos.direction = direction;
return pos;
};
$scope.stringStartsWith = function(searchString, findString) {
return searchString.substr(0, findString.length) === findString;
};
$scope.stringContains = function(searchString, findString) {
return searchString.indexOf(findString) !== -1;
};
if (attrs.title || attrs.tooltip) {

@@ -153,0 +149,0 @@ // attach events to show tooltip

@@ -1,1 +0,1 @@

!function(){"use strict";var t=function(t,e){return{restrict:"A",scope:{title:"@"},link:function(o,i,l){o.createTooltip=function(t){if(l.title||l.tooltip){var e=o.getDirection();o.tooltipElement=angular.element("<div>").addClass("angular-tooltip angular-tooltip-"+e),angular.element(document).find("body").append(o.tooltipElement),o.updateTooltip(l.title||l.tooltip),o.tooltipElement.addClass("angular-tooltip-fade-in")}},o.updateTooltip=function(l){o.tooltipElement.html(l),e(o.tooltipElement.contents())(o);var p=o.calculatePosition(o.tooltipElement,o.getDirection());o.tooltipElement.css(p),t(function(){i.removeAttr("ng-attr-title"),i.removeAttr("title")})},o.$watch("title",function(t){o.tooltipElement&&o.updateTooltip(t)}),o.removeTooltip=function(){var t=angular.element(document.querySelectorAll(".angular-tooltip"));t.remove()},o.getDirection=function(){return i.attr("tooltip-direction")||i.attr("title-direction")||"top"},o.calculatePosition=function(t,e){var o=t[0].getBoundingClientRect(),l=i[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-o.width/2+p+"px",top:l.top-o.height-r/2+n+"px"};case"top-right":return{left:l.left+l.width-r+p+"px",top:l.top-o.height-r/2+n+"px"};case"right-top":return{left:l.left+l.width+r/2+p+"px",top:l.top-o.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-o.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-o.width/2+p+"px",top:l.top+l.height+r/2+n+"px"};case"bottom-left":return{left:l.left-o.width+r+p+"px",top:l.top+l.height+r/2+n+"px"};case"left-bottom":return{left:l.left-o.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-o.width-r/2+p+"px",top:l.top+l.height/2-o.height/2+n+"px"};case"left-top":return{left:l.left-o.width-r/2+p+"px",top:l.top-o.height+r+n+"px"};case"top-left":return{left:l.left-o.width+r+p+"px",top:l.top-o.height-r/2+n+"px"}}},l.title||l.tooltip?(i.on("mouseover",o.createTooltip),i.on("mouseout",o.removeTooltip)):(i.off("mouseover",o.createTooltip),i.off("mouseout",o.removeTooltip)),i.on("destroy",o.removeTooltip),o.$on("$destroy",o.removeTooltip)}}};t.$inject=["$timeout","$compile"],angular.module("tooltips",[]).directive("title",t).directive("tooltip",t)}();
!function(){"use strict";var t=function(t,o){return{restrict:"A",scope:{title:"@",fixedPosition:"="},link:function(e,i,n){e.createTooltip=function(t){if(n.title||n.tooltip){e.getDirection();e.tooltipElement=angular.element("<div>").addClass("angular-tooltip"),angular.element(document).find("body").append(e.tooltipElement),e.updateTooltip(n.title||n.tooltip),e.tooltipElement.addClass("angular-tooltip-fade-in")}},e.updateTooltip=function(n){e.tooltipElement.html(n),o(e.tooltipElement.contents())(e);var l=e.calculatePosition(e.tooltipElement,e.getDirection());e.tooltipElement.addClass("angular-tooltip-"+l.direction).css(l),t(function(){i.removeAttr("ng-attr-title"),i.removeAttr("title")})},e.$watch("title",function(t){e.tooltipElement&&e.updateTooltip(t)}),e.removeTooltip=function(){angular.element(document.querySelectorAll(".angular-tooltip")).remove()},e.getDirection=function(){return i.attr("tooltip-direction")||i.attr("title-direction")||"top"},e.calculatePosition=function(t,o){var n=t[0].getBoundingClientRect(),l=i[0].getBoundingClientRect(),r=window.scrollX||document.documentElement.scrollLeft,p=window.scrollY||document.documentElement.scrollTop,a={},c=null;return e.stringStartsWith(o,"left")?a.left=l.left-n.width-6+r:e.stringStartsWith(o,"right")?a.left=l.left+l.width+6+r:e.stringContains(o,"left")?a.left=l.left-n.width+12+r:e.stringContains(o,"right")?a.left=l.left+l.width-12+r:a.left=l.left+l.width/2-n.width/2+r,e.stringStartsWith(o,"top")?a.top=l.top-n.height-6+p:e.stringStartsWith(o,"bottom")?a.top=l.top+l.height+6+p:e.stringContains(o,"top")?a.top=l.top-n.height+12+p:e.stringContains(o,"bottom")?a.top=l.top+l.height-12+p:a.top=l.top+l.height/2-n.height/2+p,e.fixedPosition&&(a.left<r?c=o.replace("left","right"):a.left+n.width>window.innerWidth+r&&(c=o.replace("right","left")),a.top<p?c=o.replace("top","bottom"):a.top+n.height>window.innerHeight+p&&(c=o.replace("bottom","top")),c)?e.calculatePosition(t,c):(a.left+="px",a.top+="px",a.direction=o,a)},e.stringStartsWith=function(t,o){return t.substr(0,o.length)===o},e.stringContains=function(t,o){return-1!==t.indexOf(o)},n.title||n.tooltip?(i.on("mouseover",e.createTooltip),i.on("mouseout",e.removeTooltip)):(i.off("mouseover",e.createTooltip),i.off("mouseout",e.removeTooltip)),i.on("destroy",e.removeTooltip),e.$on("$destroy",e.removeTooltip)}}};t.$inject=["$timeout","$compile"],angular.module("tooltips",[]).directive("title",t).directive("tooltip",t)}();

@@ -0,0 +0,0 @@ angular.module('app', ['tooltips']).controller('AppCtrl', function($scope) {

@@ -0,0 +0,0 @@ module.exports = {

module.exports = {
mangle: true
};

@@ -0,0 +0,0 @@ var SRC = 'src/';

@@ -0,0 +0,0 @@ var gulp = require('gulp');

@@ -0,0 +0,0 @@ var gulp = require('gulp');

@@ -0,0 +0,0 @@ var gulp = require('gulp');

@@ -0,0 +0,0 @@ var gulp = require('gulp');

@@ -0,0 +0,0 @@ var gulp = require('gulp');

@@ -0,0 +0,0 @@ var gulp = require('gulp');

@@ -0,0 +0,0 @@ var gulp = require('gulp');

@@ -0,0 +0,0 @@ var gutil = require('gulp-util');

@@ -0,0 +0,0 @@ require('require-dir')('gulp/tasks');

{
"name": "angularjs-tooltips",
"version": "1.0.3",
"version": "1.0.4",
"license": "MIT",

@@ -15,8 +15,8 @@ "main": "dist/angular-tooltips.js",

"devDependencies": {
"del": "^2.2.0",
"del": "^3.0.0",
"glob": "^7.0.0",
"gulp": "^3.0.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-changed": "^1.3.0",
"gulp-cssmin": "^0.1.7",
"gulp-autoprefixer": "^4.0.0",
"gulp-changed": "^3.0.0",
"gulp-cssmin": "^0.2.0",
"gulp-jscs": "^4.0.0",

@@ -27,12 +27,12 @@ "gulp-jshint": "^2.0.0",

"gulp-sass": "^3.0.0",
"gulp-scss-lint": "^0.4.0",
"gulp-uglify": "^2.0.0",
"gulp-scss-lint": "^0.5.0",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.6",
"jshint": "^2.9.1",
"jshint-stylish": "^2.1.0",
"node-notifier": "^4.2.3",
"node-notifier": "^5.0.0",
"require-dir": "^0.3.0",
"run-sequence": "^1.1.2",
"run-sequence": "^2.0.0",
"vinyl-paths": "^2.0.0"
}
}

@@ -41,3 +41,3 @@ # angular-tooltips

You can also specify the direction of the tooltip using ```title-direction``` with the options: top, top-right, right-top, right, right-bottom, bottom-right, bottom, bottom-left, left-bottom, left, left-top, top-left
The direction of the tooltip can be specified using ```title-direction``` with the options: top, top-right, right-top, right, right-bottom, bottom-right, bottom, bottom-left, left-bottom, left, left-top, top-left

@@ -48,2 +48,9 @@ ```html

The direction of the tooltip will automatically swap if the tooltip will sit outside of the window bounds.
To stop this happening and force the direction set the ```fixed-position``` option
```html
<i class="fa fa-star" title="This is a star!" title-direction="right" fixed-position="true"></i>
```
## Demo

@@ -50,0 +57,0 @@

@@ -8,3 +8,4 @@ (function() {

scope: {
title: '@'
title: '@',
fixedPosition: '=',
},

@@ -18,4 +19,3 @@ link: function ($scope, element, attrs) {

// create the tooltip
$scope.tooltipElement = angular.element('<div>')
.addClass('angular-tooltip angular-tooltip-' + direction);
$scope.tooltipElement = angular.element('<div>').addClass('angular-tooltip');

@@ -25,2 +25,3 @@ // append to the body

// update the contents and position
$scope.updateTooltip(attrs.title || attrs.tooltip);

@@ -34,8 +35,11 @@

$scope.updateTooltip = function(title) {
// insert html into tooltip
$scope.tooltipElement.html(title);
// compile html contents into angularjs
$compile($scope.tooltipElement.contents())($scope);
var css = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection());
$scope.tooltipElement.css(css);
// calculate the position of the tooltip
var pos = $scope.calculatePosition($scope.tooltipElement, $scope.getDirection());
$scope.tooltipElement.addClass('angular-tooltip-' + pos.direction).css(pos);

@@ -49,2 +53,3 @@ // stop the standard tooltip from being shown

// if the title changes the update the tooltip
$scope.$watch('title', function(newTitle) {

@@ -71,2 +76,3 @@ if ($scope.tooltipElement) {

// calculates the position of the tooltip
$scope.calculatePosition = function(tooltip, direction) {

@@ -78,75 +84,65 @@ var tooltipBounding = tooltip[0].getBoundingClientRect();

var arrow_padding = 12;
var pos = {};
var newDirection = null;
switch (direction) {
case 'top':
case 'top-center':
case 'top-middle':
return {
left: elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
};
case 'top-right':
return {
left: elBounding.left + elBounding.width - arrow_padding + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
};
case 'right-top':
return {
left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height + arrow_padding + scrollTop + 'px',
};
case 'right':
case 'right-center':
case 'right-middle':
return {
left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop + 'px',
};
case 'right-bottom':
return {
left: elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top + elBounding.height - arrow_padding + scrollTop + 'px',
};
case 'bottom-right':
return {
left: elBounding.left + elBounding.width - arrow_padding + scrollLeft + 'px',
top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
};
case 'bottom':
case 'bottom-center':
case 'bottom-middle':
return {
left: elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft + 'px',
top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
};
case 'bottom-left':
return {
left: elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft + 'px',
top: elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop + 'px',
};
case 'left-bottom':
return {
left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top + elBounding.height - arrow_padding + scrollTop + 'px',
};
case 'left':
case 'left-center':
case 'left-middle':
return {
left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop + 'px',
};
case 'left-top':
return {
left: elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height + arrow_padding + scrollTop + 'px',
};
case 'top-left':
return {
left: elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft + 'px',
top: elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop + 'px',
};
// calculate the left position
if ($scope.stringStartsWith(direction, 'left')) {
pos.left = elBounding.left - tooltipBounding.width - (arrow_padding / 2) + scrollLeft;
} else if ($scope.stringStartsWith(direction, 'right')) {
pos.left = elBounding.left + elBounding.width + (arrow_padding / 2) + scrollLeft;
} else if ($scope.stringContains(direction, 'left')) {
pos.left = elBounding.left - tooltipBounding.width + arrow_padding + scrollLeft;
} else if ($scope.stringContains(direction, 'right')) {
pos.left = elBounding.left + elBounding.width - arrow_padding + scrollLeft;
} else {
pos.left = elBounding.left + (elBounding.width / 2) - (tooltipBounding.width / 2) + scrollLeft;
}
// calculate the top position
if ($scope.stringStartsWith(direction, 'top')) {
pos.top = elBounding.top - tooltipBounding.height - (arrow_padding / 2) + scrollTop;
} else if ($scope.stringStartsWith(direction, 'bottom')) {
pos.top = elBounding.top + elBounding.height + (arrow_padding / 2) + scrollTop;
} else if ($scope.stringContains(direction, 'top')) {
pos.top = elBounding.top - tooltipBounding.height + arrow_padding + scrollTop;
} else if ($scope.stringContains(direction, 'bottom')) {
pos.top = elBounding.top + elBounding.height - arrow_padding + scrollTop;
} else {
pos.top = elBounding.top + (elBounding.height / 2) - (tooltipBounding.height / 2) + scrollTop;
}
// check if the tooltip is outside the bounds of the window
if ($scope.fixedPosition) {
if (pos.left < scrollLeft) {
newDirection = direction.replace('left', 'right');
} else if ((pos.left + tooltipBounding.width) > (window.innerWidth + scrollLeft)) {
newDirection = direction.replace('right', 'left');
}
if (pos.top < scrollTop) {
newDirection = direction.replace('top', 'bottom');
} else if ((pos.top + tooltipBounding.height) > (window.innerHeight + scrollTop)) {
newDirection = direction.replace('bottom', 'top');
}
if (newDirection) {
return $scope.calculatePosition(tooltip, newDirection);
}
}
pos.left += 'px';
pos.top += 'px';
pos.direction = direction;
return pos;
};
$scope.stringStartsWith = function(searchString, findString) {
return searchString.substr(0, findString.length) === findString;
};
$scope.stringContains = function(searchString, findString) {
return searchString.indexOf(findString) !== -1;
};
if (attrs.title || attrs.tooltip) {

@@ -153,0 +149,0 @@ // attach events to show tooltip

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc