Add tooltip to the elements of the target table

Tooltip has been added to the `First Name`, 'Last Name', `Email` and
`Position` columns of the targets table in the group modal while
creating and editing a group.
Right now if any of the above-mentioned elements is more than 15
characters in length it is truncated and suffixed with an ellipsis.
This at times creates confusion while viewing groups that have targets
similar first name, last name, email, etc.
With this commit, a small pop-up box with the complete value of the
element will appear whenever that element is hovered over by the mouse.

static/js/src/app/groups.js

@@ -56,8 +56,16 @@ function edit(id) {
     targets = $("#targetsTable").dataTable({
         destroy: true, // Destroy any other instantiated table - http://datatables.net/manual/tech-notes/3#destroy
         columnDefs: [{
+            targets: [0,1,2,3],
+            render: function ( data, type, row ) {
+                return type === 'display' && data.length > 15 ?
+                '<span title= \"' + data +'\">' + data.substr(0,15) + '…</span>':
+                '<span title= \"' + data +'\">' + data + '</span>';
+            }
+        },
+        {
             orderable: false,
-            targets: "no-sort"
+            targets: "no-sort",
         }]
     })
     $("#modalSubmit").unbind('click').click(function () {