diff --git a/README.md b/README.md
index b26dd86..18d626b 100644
--- a/README.md
+++ b/README.md
@@ -124,33 +124,34 @@ The following code showcases a simple usage example in a .vue SFC (Single File C
 
 ## Props
 
-| Prop                     | Type            | Default          | Description                                                         |
-| ------------------------ | --------------- | ---------------- | ------------------------------------------------------------------- |
-| allow-add                | `Boolean`       | `true`           | allow to add new bar on double click                                |
-| bar-config-key           | `String`        | `ganttBarConfig` |                                                                     |
-| bar-start-key            | `String`        | `start`          | property name of the bar objects that represents the start datetime |
-| bar-end-key              | `String`        | `end`            | property name of the bar objects that represents the end datetime   |
-| chart-start (_required_) | `String`        | -                | format `YYYY-MM-DD HH:mm`                                           |
-| chart-end (_required_)   | `String`        | -                | format `YYYY-MM-DD HH:mm`                                           |
-| day-format               | `String`        | `ddd DD MMMM`    |                                                                     |
-| grid                     | `Boolean`       | `false`          | hide/show grid                                                      |
-| grid-size                | `Number`        | `30`             | horizontal cell width in pixels                                     |
-| default-bar-length       | `Number`        | `1`              |                                                                     |
-| height                   | `String`        | -                | the total height of the entire Vue-Ganttastic component             |
-| hide-timeaxis            | `Boolean`       | `false`          | hide timeaxis                                                       |
-| highlighted-days         | `Array<String>` | `[]`             | format of day `YYYY-MM-DD`                                          |
-| highlighted-hours        | `Array<Number>` | `[]`             |                                                                     |
-| is-magnetic              | `Boolean`       | -                | magnetic effect                                                     |
-| locale                   | `String`        | `en`             | localization                                                        |
-| min-gap-between-bars     | `Number`        | `0`              |                                                                     |
-| month-format             | `String`        | `MMMM YYYY`      |                                                                     |
-| precision                | `String`        | `month`          | day, month                                                          |
-| push-on-overlap          | `Boolean`       | -                |                                                                     |
-| row-height               | `Number`        | `40`             |                                                                     |
-| row-label-width          | `Number`        | `200`            | label width in pixels                                               |
-| snap-back-on-overlap     | `Boolean`       | -                |                                                                     |
-| theme                    | `String`        | `default`        |                                                                     |
-| width                    | `String`        | `100%`           | the total width of the entire Vue-Ganttastic component              |
+| Prop                     | Type            | Default                               | Description                                                         |
+| ------------------------ | --------------- | ------------------------------------- | ------------------------------------------------------------------- |
+| allow-add                | `Boolean`       | `true`                                | allow to add new bar on double click                                |
+| bar-config-key           | `String`        | `ganttBarConfig`                      |                                                                     |
+| bar-start-key            | `String`        | `start`                               | property name of the bar objects that represents the start datetime |
+| bar-end-key              | `String`        | `end`                                 | property name of the bar objects that represents the end datetime   |
+| chart-start (_required_) | `String`        | -                                     | format `YYYY-MM-DD HH:mm`                                           |
+| chart-end (_required_)   | `String`        | -                                     | format `YYYY-MM-DD HH:mm`                                           |
+| day-format               | `String`        | `ddd DD MMMM`                         |                                                                     |
+| grid                     | `Boolean`       | `false`                               | hide/show grid                                                      |
+| grid-size                | `Number`        | `30`                                  | horizontal cell width in pixels                                     |
+| default-bar-length       | `Number`        | `1`                                   |                                                                     |
+| height                   | `String`        | -                                     | the total height of the entire Vue-Ganttastic component             |
+| hide-timeaxis            | `Boolean`       | `false`                               | hide timeaxis                                                       |
+| highlighted-days         | `Array<String>` | `[]`                                  | format of day `YYYY-MM-DD`                                          |
+| highlighted-hours        | `Array<Number>` | `[]`                                  |                                                                     |
+| is-magnetic              | `Boolean`       | -                                     | magnetic effect                                                     |
+| locale                   | `String`        | `en`                                  | localization                                                        |
+| min-gap-between-bars     | `Number`        | `0`                                   |                                                                     |
+| month-format             | `String`        | `MMMM YYYY`                           |                                                                     |
+| precision                | `String`        | `month`                               | day, month                                                          |
+| push-on-overlap          | `Boolean`       | -                                     |                                                                     |
+| row-height               | `Number`        | `40`                                  |                                                                     |
+| row-label-width          | `Number`        | `200`                                 | label width in pixels                                               |
+| snap-back-on-overlap     | `Boolean`       | -                                     |                                                                     |
+| theme                    | `String`        | `default`                             |                                                                     |
+| tooltip-format           | `String`        | `{start} - {end} duration {duration}` |                                                                     |
+| width                    | `String`        | `100%`                                | the total width of the entire Vue-Ganttastic component              |
 
 ## Contributing
 
diff --git a/lib/components/GGanttBar.vue b/lib/components/GGanttBar.vue
index 9479709..183ef42 100644
--- a/lib/components/GGanttBar.vue
+++ b/lib/components/GGanttBar.vue
@@ -17,7 +17,7 @@
     >
       <div class="g-gantt-bar__label">
         <slot name="bar-label" :bar="localBar">
-          {{ barConfig.label || '' }}
+          {{ barConfig.label }}
         </slot>
       </div>
       <template v-if="barConfig.handles">
@@ -41,7 +41,7 @@
         />
         <div>
           <div>{{ localBar.tooltip }}</div>
-          <div>{{ barStartText }} - {{ barEndText }}</div>
+          <div>{{ tooltipContent }}</div>
         </div>
       </div>
     </transition>
@@ -51,6 +51,27 @@
 <script>
 import moment from 'moment'
 
+String.prototype.formatUnicorn =
+  String.prototype.formatUnicorn ||
+  function () {
+    'use strict'
+    let str = this /*.toString()*/
+    if (arguments.length) {
+      const notSeenInNature = '#$%#$%' // or whatever
+      const t = typeof arguments[0]
+      let args =
+        'string' === t || 'number' === t
+          ? Array.prototype.slice.call(arguments)
+          : arguments[0]
+      for (let key in args) {
+        let rv = String(args[key]).replace('{', notSeenInNature)
+        str = str.replace(new RegExp('\\{' + key + '\\}', 'gi'), rv)
+      }
+      str = str.replace(notSeenInNature, '{')
+    }
+    return str
+  }
+
 export default {
   name: 'GGanttBar',
 
@@ -162,6 +183,15 @@ export default {
       }
     },
 
+    barDurationText() {
+      const duration = moment.duration(
+        this.barEndMoment.diff(this.barStartMoment)
+      )
+      return `${Math.floor(duration.as('d'))} ${moment
+        .utc(duration.as('ms'))
+        .format('HH:mm')}`
+    },
+
     barConfig() {
       if (this.localBar[this.barConfigKey]) {
         return {
@@ -192,6 +222,14 @@ export default {
       }
     },
 
+    tooltipContent() {
+      return this.chartProps.tooltipFormat.formatUnicorn({
+        start: this.barStartText,
+        end: this.barEndText,
+        duration: this.barDurationText
+      })
+    },
+
     tooltipStyle() {
       return {
         left: this.barStyle.left,
diff --git a/lib/components/GGanttChart.vue b/lib/components/GGanttChart.vue
index a779136..5213691 100644
--- a/lib/components/GGanttChart.vue
+++ b/lib/components/GGanttChart.vue
@@ -80,7 +80,11 @@ export default {
     barEndKey: { type: String, default: 'end' }, // property name of the bar objects that represents the end datetime
     allowAdd: { type: Boolean, default: true },
     dayFormat: { type: String, default: 'ddd DD MMMM' },
-    monthFormat: { type: String, default: 'MMMM YYYY' }
+    monthFormat: { type: String, default: 'MMMM YYYY' },
+    tooltipFormat: {
+      type: String,
+      default: '{start} - {end} duration: {duration}'
+    }
   },
 
   data() {