use bootstrap tooltips instead of own solution (#741)

assets/js/kimai.js

@@ -43,29 +43,61 @@ $(function() {
 
             // activate the dropdown functionality
             $('.dropdown-toggle').dropdown();
-
-            // auto hide success message after x seconds, as they are just meant as quick feedback and
-            // not as a permanent source of information
-            setTimeout(
-                function() {
-                    $('div.alert-success').alert('close');
-                },
-                5000
-            );
-
-            // compound field in toolbar
+            // activate the tooltip functionality
+            $('[data-toggle="tooltip"]').tooltip();
+            // auto hide success messages, as they are just meant as user feedback and not as a permanent information
+            this.activateAutomaticAlertRemove('div.alert-success', 5000);
+            // activate the (daterangepicker) compound field in toolbar
             this.activateDateRangePicker('.content-wrapper');
-
             // single select boxes in toolbars
             this.activateDatePicker('.content-wrapper');
-
             // edit timesheet - date with time
             this.activateDateTimePicker('.content-wrapper');
-
             // some actions can be performed in a modal for a better UX
             this.activateAjaxFormInModal('a.modal-ajax-form');
-
-            $('body').on('change', 'select[data-related-select]', function(event) {
+            // activate select boxes that load dynamic data via API
+            this.activateApiSelects('select[data-related-select]');
+        },
+        reloadDatatableWithToolbarFilter: function() {
+            // TODO check if toolbar form is present, if not, reload current URL
+            var $form = $('.toolbar form');
+            var loading = '<div class="overlay"><i class="fas fa-sync fa-spin"></i></div>';
+            $('section.content').append(loading);
+            $.ajax({
+                url: $form.attr('action'),
+                type: $form.attr('method'),
+                data: $form.serialize(),
+                success: function(html) {
+                    $('section.content').replaceWith(
+                        $(html).find('section.content')
+                    );
+                },
+                error: function(xhr, err) {
+                    $form.submit();
+                }
+            });
+        },
+        pauseRecord: function(selector) {
+            $(selector + ' .pull-left i').hover(function () {
+                var link = $(this).parents('a');
+                link.attr('href', link.attr('href').replace('/stop', '/pause'));
+                $(this).removeClass('fa-stop-circle').addClass('fa-pause-circle').addClass('text-orange');
+            },function () {
+                var link = $(this).parents('a');
+                link.attr('href', link.attr('href').replace('/pause', '/stop'));
+                $(this).removeClass('fa-pause-circle').removeClass('text-orange').addClass('fa-stop-circle');
+            });
+        },
+        activateAutomaticAlertRemove(selector, mseconds) {
+            setTimeout(
+                function() {
+                    $(selector).alert('close');
+                },
+                mseconds
+            );
+        },
+        activateApiSelects: function(selector) {
+            $('body').on('change', selector, function(event) {
                 var apiUrl = $(this).attr('data-api-url').replace('-s-', $(this).val());
                 var targetSelect = $(this).attr('data-related-select');
 
@@ -101,36 +133,6 @@ $(function() {
                 });
             });
         },
-        reloadDatatableWithToolbarFilter: function() {
-            // TODO check if toolbar form is present, if not, reload current URL
-            var $form = $('.toolbar form');
-            var loading = '<div class="overlay"><i class="fas fa-sync fa-spin"></i></div>';
-            $('section.content').append(loading);
-            $.ajax({
-                url: $form.attr('action'),
-                type: $form.attr('method'),
-                data: $form.serialize(),
-                success: function(html) {
-                    $('section.content').replaceWith(
-                        $(html).find('section.content')
-                    );
-                },
-                error: function(xhr, err) {
-                    $form.submit();
-                }
-            });
-        },
-        pauseRecord: function(selector) {
-            $(selector + ' .pull-left i').hover(function () {
-                var link = $(this).parents('a');
-                link.attr('href', link.attr('href').replace('/stop', '/pause'));
-                $(this).removeClass('fa-stop-circle').addClass('fa-pause-circle').addClass('text-orange');
-            },function () {
-                var link = $(this).parents('a');
-                link.attr('href', link.attr('href').replace('/pause', '/stop'));
-                $(this).removeClass('fa-pause-circle').removeClass('text-orange').addClass('fa-stop-circle');
-            });
-        },
         activateDatePicker: function(selector) {
             $(selector + ' input[data-datepickerenable="on"]').each(function(index) {
                 var localeFormat = $(this).data('format');

assets/sass/app.scss

@@ -38,5 +38,4 @@ footer.main-footer {
 @import 'dashboard';
 @import 'navbar';
 @import 'daterangepicker';
-@import 'tooltip';
 @import 'skins';

assets/sass/tooltip.scss

@@ -1,36 +0,0 @@
-/*
- * This file is part of the Kimai time-tracking app.
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-/*
- * These styles are not yet used and need some love before actively promoted in the UI.
- * They could be used in: templates/macros/widgets.html.twig::label
- */
-
-[data-tooltip] {
-    position: relative;
-    overflow: visible;
-}
-[data-tooltip]:after {
-    transition: all .2s ease;
-    content: attr(data-tooltip);
-    position: absolute;
-    top: -24px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: $gray;
-    color: #fff;
-    padding: 2px 12px;
-    pointer-events: none;
-    white-space: nowrap;
-    font-size: 11px;
-    line-height: 18px;
-    border-radius: $border-radius-small;
-    z-index: 2;
-}
-[data-tooltip]:not(:hover):after {
-    opacity: 0;
-}

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
-  "build/app.js": "./app.js?[contenthash]",
-  "build/app.css": "./app.css?996ae1142414de4354740600f29d7f64",
+  "build/app.js": "./app.js?14f8ca3b94540353d1d6",
+  "build/app.css": "./app.css?bd8042ad442c72d1e3112deb9df5e6ac",
   "build/fonts/fa-solid-900.woff2": "./fonts/fa-solid-900.woff2?e8a92a29",
   "build/images/fa-solid-900.svg": "./images/fa-solid-900.svg?666a82cb",
   "build/images/glyphicons-halflings-regular.svg": "./images/glyphicons-halflings-regular.svg?89889688",

templates/macros/widgets.html.twig

@@ -83,7 +83,7 @@
 
 {% macro label(title, type, tooltip) %}
     {# success, warning, danger, primary #}
-    <span {%  if tooltip %}data-tooltip="{{ tooltip }}" {% endif %}class="label label-{{ type|default('success') }}">{{ title|trans }}</span>
+    <span {% if tooltip %}data-toggle="tooltip" data-placement="top" title="{{ tooltip }}" {% endif %}class="label label-{{ type|default('success') }}">{{ title|trans }}</span>
 {% endmacro %}
 
 {% macro badge(title, color) %}

webpack.config.js

@@ -41,7 +41,7 @@ Encore
 
     // add hash after file name
     .configureFilenames({
-        js: '[name].js?[contenthash]',
+        js: '[name].js?[chunkhash]',
         css: '[name].css?[contenthash]',
         images: 'images/[name].[ext]?[hash:8]',
         fonts: 'fonts/[name].[ext]?[hash:8]'