diff --git a/css/style.scss b/css/style.scss
index b0b45be4e..4d663dae3 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -996,6 +996,10 @@ input.input-inline {
 		padding: 16px;
 		opacity: 0.5;
 	}
+
+	&.has-contactsmenu img {
+		cursor: pointer;
+	}
 }
 
 .avatardiv-container {
diff --git a/js/directive/avatar.js b/js/directive/avatar.js
index 95f4a2489..c93165985 100644
--- a/js/directive/avatar.js
+++ b/js/directive/avatar.js
@@ -23,15 +23,27 @@
 app.directive('avatar', function() {
 	'use strict';
 	return {
-		restrict: 'A',
-		scope: true,
+		restrict: 'AEC',
+		transclude: true,
+		replace: true,
+		template: '<div class="avatardiv-container"><div class="avatardiv" data-toggle="tooltip" ng-transclude></div></div>',
+		scope: { attr: '=' },
 		link: function(scope, element, attr){
+			scope.uid = attr.displayname;
+			scope.displayname = attr.displayname;
 			var value = attr.user;
-			$(element).wrap('<div class="avatardiv-container"></div>');
-			if(attr.contactsmenu && oc_current_user !== value) {
-				$(element).contactsMenu(value, 0, $(element).parent());
+			var avatardiv = $(element).find('.avatardiv');
+			if(typeof attr.contactsmenu !== 'undefined' && attr.contactsmenu !== 'false' && oc_current_user !== value) {
+				avatardiv.contactsMenu(value, 0, $(element));
+				avatardiv.addClass('has-contactsmenu');
 			}
-			$(element).avatar(value, 32, false, false, false, attr.displayname);
+			if(typeof attr.tooltip !== 'undefined' && attr.tooltip !== 'false') {
+				$(element).tooltip({
+					title: scope.displayname,
+					placement: 'top'
+				});
+			}
+			avatardiv.avatar(value, 32, false, false, false, attr.displayname);
 		},
 		controller: function () {}
 	};
diff --git a/js/directive/contactsmenudelete.js b/js/directive/contactsmenudelete.js
index e9c638545..8fdbac5ef 100644
--- a/js/directive/contactsmenudelete.js
+++ b/js/directive/contactsmenudelete.js
@@ -25,15 +25,14 @@ app.directive('contactsmenudelete', function() {
 	return {
 		restrict: 'A',
 		priority: 1,
-		scope: true,
 		link: function(scope, element, attr){
 			var user = attr.user;
 			var menu = $(element).parent().find('.contactsmenu-popover');
-			var menuentry = $('<li><a><span class="icon icon-delete"></span><span>' + t('deck', 'Remove user from card') + '</span></a></li>');
-			menuentry.on('click', function () {
+			var menuEntry = $('<li><a><span class="icon icon-delete"></span><span>' + t('deck', 'Remove user from card') + '</span></a></li>');
+			menuEntry.on('click', function () {
 				scope.removeAssignedUser(user);
 			});
-			$(menu).append(menuentry);
+			$(menu).append(menuEntry);
 		}
 	};
 });
\ No newline at end of file
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index 823527d11..7fa82c0f4 100644
--- a/templates/part.board.mainView.php
+++ b/templates/part.board.mainView.php
@@ -82,7 +82,7 @@
 							</span>
 							<div class="card-assigned-users">
 								<div class="assigned-user" ng-repeat="user in c.assignedUsers | limitTo: 3">
-									<div class="avatardiv" avatar ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" data-toggle="tooltip" data-placement="bottom" title="{{ user.participant.displayname }}"></div>
+									<avatar data-user="{{ user.participant.uid }}" data-displayname="{{ user.participant.displayname }}" data-tooltip></avatar>
 								</div>
 							</div>
 							<div class="app-popover-menu-utils" ng-if="!boardservice.isArchived()">
diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php
index 3047d0c36..a8a80a6b0 100644
--- a/templates/part.boardlist.php
+++ b/templates/part.boardlist.php
@@ -41,8 +41,8 @@
 			</td>
 			<td>
 				<div id="assigned-users">
-					<div class="avatardiv" avatar data-user="{{ b.owner.uid }}" data-displayname="{{ b.owner.displayname }}" data-toggle="tooltip" title="{{ b.owner.displayname }}"></div>
-					<div class="avatardiv" avatar data-contactsmenu="true" data-user="{{ acl.participant.uid }}" data-displayname="{{ acl.participant.displayname }}" data-toggle="tooltip" title="{{ acl.participant.displayname }}" ng-repeat="acl in b.acl | limitTo: 7"></div>
+					<avatar data-user="{{ b.owner.uid }}" data-displayname="{{ b.owner.displayname }}"></avatar>
+					<avatar data-contactsmenu data-tooltip data-user="{{ acl.participant.uid }}" data-displayname="{{ acl.participant.displayname }}" ng-repeat="acl in b.acl | limitTo: 7"></avatar>
 				</div>
 			</td>
 			<td>
diff --git a/templates/part.card.php b/templates/part.card.php
index 19c085281..7e1633175 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -67,8 +67,7 @@
 	</ui-select>
 		<div class="card-details-assign-users-list">
 			<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers">
-				<div class="avatardiv" avatar data-contactsmenu="true" ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.uid }}" contactsmenudelete
-					 data-toggle="tooltip" data-placement="bottom" title="{{ user.participant.displayname }}"></div>
+				<avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" contactsmenudelete ></avatar>
 			</div>
 		</div>
 	</div>