<template>
  <!-- <transition name="fade"> -->
  <span
    v-if="isTopAligned"
    :class="classes"
    :style="arrowColor"
    class="tooltipTop z-100 absolute rounded-md px-3 py-2 text-sm opacity-100 shadow-lg"
    >{{ tooltipText }}</span
  >
  <span
    v-else-if="isBottomAligned"
    :class="classes"
    :style="arrowColor"
    class="tooltipBottom z-100 absolute rounded-md px-3 py-2 text-sm opacity-100 shadow-lg"
    >{{ tooltipText }}</span
  >
  <span
    v-else
    :class="classes"
    :style="arrowColor"
    class="tooltip z-100 absolute rounded-md px-3 py-2 text-sm opacity-100 shadow-lg"
    >{{ tooltipText }}</span
  >
  <!-- </transition> -->
</template>
<script>
export default {
  name: "CToolTip",
  props: {
    classes: {
      type: String,
    },
    tooltipText: {
      type: String,
    },
    color: {
      type: String,
    },
    isTopAligned: {
      type: Boolean,
      default: false,
    },
    isBottomAligned: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    arrowColor() {
      return {
        "--color": this.color,
      };
    },
  },
};
</script>
<style scoped>
span.tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent var(--color) transparent;
  top: 8.5px;
  right: -15px;
  rotate: 90deg;
}

span.tooltipTop::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent var(--color) transparent transparent;
  left: calc(50% - 8px);
  rotate: 270deg;
  bottom: -16px;
}

span.tooltipBottom::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
  border-color: var(--color) transparent transparent transparent;
  left: calc(50% - 8px);
  rotate: 180deg;
  top: -16px;
}
/* .fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
} */
</style>
