Vue.component('tt-tooltip', {
    props: {
        text: {
            type: String,
            required: true,
            default: 'Tooltip text'
        },
        position: {
            type: String,
            default: 'top', // Options: top, bottom, left, right
            validator: function (value) {
                // The value must match one of these strings
                return ['top', 'bottom', 'left', 'right'].indexOf(value) !== -1;
            }
        },
        allowWrapping: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showTooltip: true
        };
    },
    template: `
      <div class="tt-tooltip-wrapper"
           @mouseenter="showTooltip = true"
           @mouseleave="showTooltip = false">
        <slot></slot> <div v-if="showTooltip" class="tt-tooltip-box" 
                           :style="{ whiteSpace: allowWrapping ? 'normal' : 'nowrap' }"
                           :class="['tt-tooltip-' + position]">
          {{ text }}
        </div>
      </div>
    `
});