Replaced the help text with Umbraco's umb-tooltip directive

Author: leekelleher

src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/css/innercontent.css

@@ -1,24 +1,24 @@
 /*
     Inner Content - Doc Type Picker
 */
-.inner-content__doctypepicker table input, .inner-content__doctypepicker table select {
+
+.inner-content__doctypepicker table input,
+.inner-content__doctypepicker table select {
     width: 100%;
     padding-right: 0;
 }
 
-.inner-content__doctypepicker table td.icon-navigation, .inner-content__doctypepicker i.inner-content__help-icon {
+.inner-content__doctypepicker table td.icon-navigation,
+.inner-content__doctypepicker i.inner-content__help-icon {
     vertical-align: middle;
     color: #CCC;
 }
 
-.inner-content__doctypepicker table td.icon-navigation:hover, .inner-content__doctypepicker i.inner-content__help-icon:hover {
+.inner-content__doctypepicker table td.icon-navigation:hover,
+.inner-content__doctypepicker i.inner-content__help-icon:hover {
     color: #343434;
 }
 
-.inner-content__doctypepicker i.inner-content__help-icon {
-    margin-left: 10px;
-}
-
 .inner-content__doctypepicker table .td-min {
     width: 1px;
 }

src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/js/innercontent.js

@@ -9,6 +9,9 @@ angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTy
         var vm = this;
         vm.add = add;
         vm.remove = remove;
+        vm.tooltipMouseOver = tooltipMouseOver;
+        vm.tooltipMouseLeave = tooltipMouseLeave;
+
         vm.sortableOptions = {
             axis: "y",
             containment: "parent",
@@ -22,6 +25,12 @@ angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTy
             }
         };
 
+        vm.tooltip = {
+            show: false,
+            event: null,
+            content: null
+        };
+
         innerContentService.getAllContentTypes().then(function (docTypes) {
             vm.docTypes = docTypes;
         });
@@ -36,14 +45,29 @@ angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTy
                 icContentTypeGuid: "",
                 nameTemplate: ""
             });
+            setDirty();
         };
 
         function remove(index) {
             $scope.model.value.splice(index, 1);
+            setDirty();
         };
 
+        function tooltipMouseOver($event) {
+            vm.tooltip = {
+                show: true,
+                event: $event,
+                content: $event.currentTarget.dataset.tooltip
+            };
         };
 
+        function tooltipMouseLeave() {
+            vm.tooltip = {
+                show: false,
+                event: null,
+                content: null
+            };
+        };
 
         function setDirty() {
             if ($scope.propertyForm) {

src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/views/innercontent.doctypepicker.html

@@ -9,6 +9,10 @@
                     </th>
                     <th>
                         Name Template
+                        <i class="icon icon-help-alt inner-content__help-icon"
+                           data-tooltip="Enter an angularjs expression to evaluate against each item for its name."
+                           ng-mouseover="vm.tooltipMouseOver($event)"
+                           ng-mouseleave="vm.tooltipMouseLeave()"></i>
                     </th>
                     <th class="td-min" ng-show="model.value.length > 1" />
                 </tr>
@@ -31,14 +35,9 @@
         </table>
         <div>
             <a href="" class="btn" ng-click="vm.add()">Add</a>
-            <i class="icon icon-help-alt medium inner-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
         </div>
     </div>
-    <br />
-    <div class="inner-content__help-text" ng-show="showHelpText">
-        <p>
-            <b>Name template:</b><br />
-            Enter an angular expression to evaluate against each item for its name.
-        </p>
-    </div>
+    <umb-tooltip ng-if="vm.tooltip.show" event="vm.tooltip.event">
+        {{vm.tooltip.content}}
+    </umb-tooltip>
 </div>