<template>
  <qf-popper :trigger="trigger" :placement="placement" ref="popper" :reference="reference" :preventOverflow="preventOverflow"
             :popper-class="['qf-tooltip', type ? `qf-tooltip-${type}` : '']" appendToBody :open-delay=0 :close-delay=0 :transition="''">
    <span v-html="content" v-if="content"></span>
    <template slot="reference">
      <slot></slot>
    </template>
  </qf-popper>
</template>

<script>
import QfPopper from '../../popper';

export default {
  name: 'QfTooltip',
  components: {
    QfPopper
  },
  props: {
    trigger: {
      type: String,
      default: 'hover'
    },
    placement: {
      type: String
    },
    type: {
      type: String,
      default: 'warning'
    },
    content: {
      type: String,
      default: 'message'
    },
    autoClose: {
      type: Boolean,
      default: false
    },
    preventOverflow: {
      type: Boolean,
      default: true
    },
    reference: {}
  },
  methods: {
    destroyElement() {
      this.$destroy(true);
      if (this.$el.parentNode) {
        this.$el.parentNode.removeChild(this.$el);
      }
    },

    show() {
      this.$refs.popper.doShow();
      if (this.autoClose) {
        this.timer = setTimeout(() => {
          this.close();
        }, 3000);
      }
    },

    close() {
      clearTimeout(this.timer);
      this.$refs.popper.doClose();
      this.destroyElement();
    }
  }
};
</script>
