tooltip.vue

<template>
  <div class="tooltip-component" @mouseenter="show" @mouseleave="hide">
    <div class="tooltip" :class="{ visible: isVisible }">
      <span class="tooltip-text">{{ text }}</span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        isVisible: false
      }
    },

    props: {
      text: {
        type: String,
        required: true
      }
    },

    methods: {
      show: function() {
        this.isVisible = true;
      },

      hide: function() {
        this.isVisible = false;
      }
    }
  }
</script>

<style>
  .tooltip {
    position: absolute;
    width: 200%;
    text-align: center;
    transform: translate(-25%, calc(-100% - 10px));
    opacity: 0;
    transition: opacity .5s;
  }

  .tooltip-text {
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    white-space: nowrap;
  }

  .tooltip.visible {
    opacity: 1;
  }
</style>