Tooltip.vue

<template>
  <v-tooltip
    :left="left"
    :right="right"
    :top="top || (!left && !right && !bottom)"
    :bottom="bottom"
  >
    <template v-slot:activator="{ on, attrs }">
      <span
        v-bind="attrs"
        v-on="on"
        v-if="text"
        :class="light ? 'text-light' : 'text'"
        >{{ spaceBefore ? " " : "" }}{{ text }}{{ spaceAfter ? " " : "" }}</span
      >
      <span v-bind="attrs" v-on="on" v-if="icon">
        <v-icon
          :x-small="iconSize === 'x-small'"
          :small="iconSize === 'small'"
          :medium="iconSize === 'medium'"
          :large="iconSize === 'large'"
          :x-large="iconSize === 'x-large'"
          :color="iconColor"
          >{{ icon }}</v-icon
        >
      </span>
    </template>
    <div v-if="Array.isArray(tooltip)">
      <p class="ma-0" v-for="line in tooltip" v-bind:key="line">{{ line }}</p>
    </div>
    <div v-else>
      <p class="ma-0">{{ tooltip }}</p>
    </div>
  </v-tooltip>
</template>
<script>
export default {
  name: "Wave",
  props: {
    text: {
      type: String,
      default: "",
    },
    tooltip: {
      type: [String, Array],
      default: "",
    },
    icon: {
      type: String,
      default: "",
    },
    iconSize: {
      type: String,
      default: "x-small",
    },
    iconColor: {
      type: String,
      default: "white",
    },
    left: {
      type: Boolean,
      default: false,
    },
    right: {
      type: Boolean,
      default: false,
    },
    top: {
      type: Boolean,
      default: false,
    },
    bottom: {
      type: Boolean,
      default: false,
    },
    light: {
      type: Boolean,
      default: false,
    },
    spaceBefore: {
      type: Boolean,
      default: true,
    },
    spaceAfter: {
      type: Boolean,
      default: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.text {
  border-bottom: 1px dotted #333;
}
.text-light {
  border-bottom: 1px dotted #ddd;
}
</style>