<template>
  <b-popover :target="id" triggers="hover" placement="top">
    <span class="regular-12px">{{ description }}</span>
  </b-popover>
</template>

<script>
export default {
  props: {
    description: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
  },
};
</script>
<style lang="scss" scoped>
.popover::v-deep {
  background-color: #040a0f;
  width: 168px;
  height: 76px;
}

.popover::v-deep .arrow {
  visibility: visible;
}

.popover::v-deep .arrow::after {
  border-top-color: #040a0f;
  border-bottom-color: #040a0f;
}

.regular-12px {
  color: $white;
}
</style>
