BS-270 Added a tooltip to procedures buttons (#723)

* BS-270 | Patrick | Add tooltip to procedures buttons

* BS-270 | Patrick | Show tooltip only if text overflows

* BS-270 | Patrick | fix formatting issues

* BS-270 | Vijay, Mani | remove timeout discrepancy

* BS-270 | Vijay, Mani | resolve timeout discrepancy

* BS-270 | Patrick | Add comment for tooltip positioning

---------

Co-authored-by: vijayanandtwks <vijayanand.s@thoughtworks.com>

ui/app/clinical/consultation/directives/tooltip.js

@@ -0,0 +1,42 @@
+"use strict";
+
+angular.module("bahmni.clinical").directive("tooltip", ['$timeout', function ($timeout) {
+    return {
+        restrict: "A",
+        link: function (scope, element, attrs) {
+            var tooltip = angular.element('<div class="tooltip">');
+            tooltip.text(attrs.tooltip);
+
+            // Tooltip element element positioning absolutely next to the element that the directive is applied to.
+            tooltip.css({
+                position: "absolute",
+                top: element.offset().top + element.height(),
+                left: element.offset().left + element.width() / 2 - 70
+            });
+
+            tooltip.hide();
+
+            element.on("mouseover", function () {
+                var isTextTruncated = element[0].scrollWidth > element[0].clientWidth;
+
+                var isStillOnElement = true;
+                var timeoutId = $timeout(function () {
+                    if (isStillOnElement && isTextTruncated) {
+                        tooltip.show();
+                    }
+                }, 1000);
+                element.on("mouseout", function () {
+                    isStillOnElement = false;
+                    clearTimeout(timeoutId);
+                    tooltip.hide();
+                });
+            });
+
+            angular.element(document.body).append(tooltip);
+
+            element.on("$destroy", function () {
+                tooltip.remove();
+            });
+        }
+    };
+}]);

ui/app/clinical/consultation/views/orderSelector.html

@@ -7,7 +7,9 @@
                     <a class="grid-row-element button orderBtn ng-binding ng-scope"
                        ng-click="toggleOrderSelection(test)"
                        ng-class="{active:isActiveOrderPresent(test), noteditable:isTestIndirectlyPresent(test)}"
-                       ng-disabled="isTestIndirectlyPresent(test)">
+                       ng-disabled="isTestIndirectlyPresent(test)"
+                       tooltip="{{getName(test)}}"
+                       >
                         <i class="fa fa-ok" ng-show="isActiveOrderPresent(test)"></i>{{getName(test)}}
                     </a>
                 </li>

ui/app/clinical/index.html

@@ -405,6 +405,7 @@ <h3 class="close" ng-click="closeTeleConsultation()">
 
         <script src="consultation/services/treatmentConfig.js"></script>
         <script src="consultation/filters/observationValue.js"></script>
+        <script src="consultation/directives/tooltip.js"></script>
         <script src="consultation/directives/buttonsRadio.js"></script>
         <script src="consultation/directives/alertOnExit.js"></script>
         <script src="consultation/directives/orderSelector.js"></script>