[#21] Legger på tooltip på tabelloverskriftene

uio-library · Sep 30, 2019 · d42ec1e · d42ec1e
1 parent fe9eb7d
commit d42ec1e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "sass": "^1.22.10",
     "sass-loader": "^7.3.1",
     "selectize": "~0.12.1",
+    "tooltipster": "^4.2.7",
     "vue": "^2.5.17",
     "vue-axios": "^2.1.4",
     "vue-slider-component": "^3.0.40",

diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
@@ -40,6 +40,10 @@ require('bootstrap-select/dist/js/i18n/defaults-nb_NO.js')
 
 require('selectize')
 
+require('tooltipster')
+require('tooltipster/dist/css/tooltipster.bundle.min.css')
+require('tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min.css')
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the

diff --git a/resources/js/components/DataTable.vue b/resources/js/components/DataTable.vue
@@ -46,7 +46,7 @@
                         <th v-for="field in fields" :key="field.key"></th>
                         <th v-for="group in groups" :key="group.label" :colspan="group.fields.length">{{ group.label }}</th>
                     </tr>
-                    <tr>
+                    <tr class="tooltipster">
                         <th v-for="col in columns" :key="col.data">
                             {{ col.columnLabel }}
                         </th>
@@ -167,6 +167,33 @@ export default {
 
     initTable () {
       let drag = false
+
+      $(document).ready(function() {
+          $('.tooltipster th').tooltipster({
+            maxWidth: 250,
+            delay: 800,
+            theme: 'tooltipster-borderless',
+            content: 'Loading...',
+            // 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section.
+            functionBefore: function(instance, helper) {
+              var $origin = $(helper.origin)
+              var order = table.order()
+              var label = $origin.text()
+              var currentIdx = table.column($origin[0]).index()
+              label = label.charAt(0).toLowerCase() + label.substring(1)
+              if (order.length && order[0][0] == currentIdx) {
+                if (order[0][1] == 'asc') {
+                  instance.content('Tabellen er sortert etter denne kolonnen. Trykk for å endre til synkende rekkefølge.')
+                } else {
+                  instance.content('Tabellen er sortert etter denne kolonnen. Trykk for å endre til stigende rekkefølge.')
+                }
+              } else {
+               instance.content('Trykk for å sortere etter denne kolonnnen (stigende rekkefølge).')
+              }
+            }
+          });
+      });
+
       const table = $(this.$refs.theTable).DataTable({
 
         // Define which table control elements should appear and in what order.

diff --git a/resources/sass/app.sass b/resources/sass/app.sass
@@ -74,7 +74,12 @@ body
     transform: scale(0.9)
 
 
+/*******************************************************************
+ * Tooltip
+ *******************************************************************/
 
+.tooltipster-sidetip.tooltipster-borderless .tooltipster-content
+  text-align: center
 
 /*******************************************************************
  * Header