Rule Node tooltips

ui/src/app/rulechain/rulechain.controller.js

@@ -16,6 +16,10 @@
 
 import './rulechain.scss';
 
+import 'tooltipster/dist/css/tooltipster.bundle.min.css';
+import 'tooltipster/dist/js/tooltipster.bundle.min.js';
+import 'tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css';
+
 /* eslint-disable import/no-unresolved, import/default */
 
 import addRuleNodeTemplate from './add-rulenode.tpl.html';
@@ -30,7 +34,7 @@ const aKeyCode = 65;
 const escKeyCode = 27;
 
 /*@ngInject*/
-export function RuleChainController($stateParams, $scope, $q, $mdUtil, $mdExpansionPanel, $document, $mdDialog, $filter, types, ruleChainService, Modelfactory, flowchartConstants, ruleChain, ruleChainMetaData) {
+export function RuleChainController($stateParams, $scope, $compile, $q, $mdUtil, $timeout, $mdExpansionPanel, $document, $mdDialog, $filter, types, ruleChainService, Modelfactory, flowchartConstants, ruleChain, ruleChainMetaData) {
 
     var vm = this;
 
@@ -139,6 +143,82 @@ export function RuleChainController($stateParams, $scope, $q, $mdUtil, $mdExpans
         vm.editingRuleNodeLink = angular.copy(edge);
     };
 
+    vm.nodeLibCallbacks = {
+        nodeCallbacks: {
+            'mouseEnter': function (event, node) {
+                displayNodeDescriptionTooltip(event, node);
+            },
+            'mouseLeave': function () {
+                destroyTooltips();
+            }
+        }
+    };
+
+    vm.typeHeaderMouseEnter = function(event, typeId) {
+        displayTooltip(event,
+            '<div class="tb-rule-node-tooltip">' +
+            '<div id="tooltip-content" layout="column">' +
+            '<div class="tb-node-title">' + typeId + '</div>' +
+            '<div class="tb-node-description">' + 'Some description of component type' + '</div>' +
+            '</div>' +
+            '</div>'
+        );
+    };
+
+    vm.destroyTooltips = destroyTooltips;
+
+    function destroyTooltips() {
+        if (vm.tooltipTimeout) {
+            $timeout.cancel(vm.tooltipTimeout);
+            vm.tooltipTimeout = null;
+        }
+        var instances = angular.element.tooltipster.instances();
+        instances.forEach((instance) => {
+            instance.destroy();
+        });
+    }
+
+    function displayNodeDescriptionTooltip(event, node) {
+        displayTooltip(event,
+            '<div class="tb-rule-node-tooltip">' +
+            '<div id="tooltip-content" layout="column">' +
+            '<div class="tb-node-title">' + node.component.name + '</div>' +
+            '<div class="tb-node-description">' + 'Some description of node' + '</div>' +
+            '</div>' +
+            '</div>'
+        );
+    }
+
+    function displayTooltip(event, content) {
+        destroyTooltips();
+        vm.tooltipTimeout = $timeout(() => {
+            var element = angular.element(event.target);
+            element.tooltipster(
+                {
+                    theme: 'tooltipster-shadow',
+                    delay: 100,
+                    trigger: 'custom',
+                    triggerOpen: {
+                        click: false,
+                        tap: false
+                    },
+                    triggerClose: {
+                        click: true,
+                        tap: true,
+                        scroll: true
+                    },
+                    side: 'right',
+                    trackOrigin: true
+                }
+            );
+            var contentElement = angular.element(content);
+            $compile(contentElement)($scope);
+            var tooltip = element.tooltipster('instance');
+            tooltip.content(contentElement);
+            tooltip.open();
+        }, 500);
+    }
+
     vm.editCallbacks = {
         edgeDoubleClick: function (event, edge) {
             var sourceNode = vm.modelservice.nodes.getNodeByConnectorId(edge.source);

ui/src/app/rulechain/rulechain.tpl.html

@@ -23,12 +23,15 @@
             <div class="tb-rulechain-library">
                 <md-expansion-panel-group ng-if="vm.ruleChainLibraryLoaded" class="tb-rulechain-library-panel-group" md-component-id="libraryPanelGroup" auto-expand="true" multiple>
                     <md-expansion-panel md-component-id="{{typeId}}" id="{{typeId}}" ng-repeat="(typeId, typeModel) in vm.ruleNodeTypesModel">
-                        <md-expansion-panel-collapsed>
+                        <md-expansion-panel-collapsed ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
+                                                      ng-mouseleave="vm.destroyTooltips()">
                             <div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div>
                             <md-expansion-panel-icon></md-expansion-panel-icon>
                         </md-expansion-panel-collapsed>
                         <md-expansion-panel-expanded>
-                            <md-expansion-panel-header ng-click="vm.$mdExpansionPanel(typeId).collapse()">
+                            <md-expansion-panel-header ng-mouseenter="vm.typeHeaderMouseEnter($event, typeId)"
+                                                       ng-mouseleave="vm.destroyTooltips()"
+                                                       ng-click="vm.$mdExpansionPanel(typeId).collapse()">
                                 <div class="tb-panel-title" translate>{{vm.types.ruleNodeType[typeId].name}}</div>
                                 <md-expansion-panel-icon></md-expansion-panel-icon>
                             </md-expansion-panel-header>
@@ -36,6 +39,7 @@
                                 <fc-canvas id="tb-rulechain-{{typeId}}"
                                            model="vm.ruleNodeTypesModel[typeId].model" selected-objects="vm.ruleNodeTypesModel[typeId].selectedObjects"
                                            automatic-resize="false"
+                                           callbacks="vm.nodeLibCallbacks"
                                            node-width="170"
                                            node-height="50"
                                            drop-target-id="'tb-rulchain-canvas'"></fc-canvas>

ui/src/app/rulechain/rulenode.tpl.html

@@ -18,7 +18,10 @@
 <div
         id="{{node.id}}"
         ng-attr-style="position: absolute; top: {{ node.y }}px; left: {{ node.x }}px;"
-        ng-dblclick="callbacks.doubleClick($event, node)">
+        ng-dblclick="callbacks.doubleClick($event, node)"
+        ng-mouseover="callbacks.mouseOver($event, node)"
+        ng-mouseenter="callbacks.mouseEnter($event, node)"
+        ng-mouseleave="callbacks.mouseLeave($event, node)">
     <div class="tb-rule-node {{node.nodeClass}}">
         <md-icon aria-label="node-type-icon" flex="15"
                  class="material-icons">{{node.icon}}</md-icon>