Use Bootstrap tooltips instead of plain title attributes

By using data-original-title the tooltips live update without reapplying the
js code, such as .tooltip('fixTitle') each time the content changes. This
method also works well with angular expressions:

    data-original-title="{{'Download Rate' | translate}}"

This example provides a bootstrap tooltip saying 'Download Rate' that changes
automatically when the language is updated.

gui/dark/assets/css/overrides.css

@@ -71,6 +71,10 @@ identicon {
     min-width: 250px;
 }
 
+.tooltip{
+    word-wrap:break-word;
+}
+
 .panel-heading .fa, .modal-header .fa {
     margin-right: 10px;
 }

gui/default/assets/css/overrides.css

@@ -71,6 +71,10 @@ identicon {
     min-width: 250px;
 }
 
+.tooltip{
+    word-wrap:break-word;
+}
+
 .panel-heading .fa, .modal-header .fa {
     margin-right: 10px;
 }

gui/default/index.html

@@ -258,7 +258,9 @@
                     </tr>
                     <tr>
                       <th><span class="fa fa-fw fa-folder-open"></span>&nbsp;<span translate>Folder Path</span></th>
-                      <td class="text-right" title="{{folder.path}}">{{folder.path}}</td>
+                      <td class="text-right">
+                        <span tooltip data-original-title="{{folder.path}}">{{folder.path}}</span>
+                      </td>
                     </tr>
                     <tr ng-if="model[folder.id].invalid || model[folder.id].error">
                       <th><span class="fa fa-fw fa-exclamation-triangle"></span>&nbsp;<span translate>Error</span></th>
@@ -281,7 +283,7 @@
                     <tr ng-if="folderStatus(folder) === 'scanning' && scanRate(folder.id) > 0">
                       <th><span class="fa fa-fw fa-hourglass-2"></span>&nbsp;<span translate>Scan Time Remaining</span></th>
                       <td class="text-right">
-                        <span title="{{scanRate(folder.id) | binary}}B/s">~ {{scanRemaining(folder.id)}}</span>
+                        <span tooltip data-original-title="{{scanRate(folder.id) | binary}}B/s">~ {{scanRemaining(folder.id)}}</span>
                       </td>
                     </tr>
                     <tr ng-if="!folder.readOnly && (folderStatus(folder) === 'outofsync' || hasFailedFiles(folder.id))">
@@ -344,7 +346,7 @@
                     <tr ng-if="!folder.readOnly && folderStats[folder.id].lastFile && folderStats[folder.id].lastFile.filename">
                       <th><span class="fa fa-fw fa-exchange"></span>&nbsp;<span translate>Last File Received</span></th>
                       <td class="text-right">
-                        <span title="{{folderStats[folder.id].lastFile.filename}} @ {{folderStats[folder.id].lastFile.at | date:'yyyy-MM-dd HH:mm:ss'}}">
+                        <span tooltip data-original-title="{{folderStats[folder.id].lastFile.filename}} @ {{folderStats[folder.id].lastFile.at | date:'yyyy-MM-dd HH:mm:ss'}}">
                           <span translate ng-if="!folderStats[folder.id].lastFile.deleted">Updated</span>
                           <span translate ng-if="folderStats[folder.id].lastFile.deleted">Deleted</span>
                           {{folderStats[folder.id].lastFile.filename | basename}}
@@ -451,7 +453,9 @@
                   </tr>
                   <tr>
                     <th><span class="fa fa-fw fa-tag"></span>&nbsp;<span translate>Version</span></th>
-                    <td class="text-right" title="{{versionString()}}">{{versionString()}}</td>
+                    <td class="text-right">
+                      <span tooltip data-original-title="{{versionString()}}">{{versionString()}}</span>
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -620,6 +624,7 @@
   <script src="syncthing/core/selectOnClickDirective.js"></script>
   <script src="syncthing/core/shutdownDialogDirective.js"></script>
   <script src="syncthing/core/syncthingController.js"></script>
+  <script src="syncthing/core/tooltipDirective.js"></script>
   <script src="syncthing/core/uniqueFolderDirective.js"></script>
   <script src="syncthing/core/upgradingDialogDirective.js"></script>
   <script src="syncthing/core/validDeviceidDirective.js"></script>

gui/default/syncthing/core/tooltipDirective.js

@@ -0,0 +1,11 @@
+angular.module('syncthing.core')
+    .directive('tooltip', function () {
+        return {
+            restrict: 'A',
+            link: function (scope, element, attributes) {
+                $(element).tooltip({
+                    html: 'true'
+                });
+            }
+        };
+});