<template>
  <div>
    <div class="prompt">
      <span class="prompt-text"></span>
      <div class="hint-text" v-html="text"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "No description.",
    },
  },
};
</script>

<style scoped>
.prompt-text {
  font-family: "EBI-Common";
}

.hint-text {
  visibility: hidden;
  position: absolute;
  /*left:0;*/
  right:0.7em;
  margin-left:auto;
  margin-right:auto;
  background: rgba(95, 95, 95, 0.95);
  white-space: pre-line;
  display: block;
  text-align: justify;
  max-width: 800px;
  margin-top: 5px;
  padding: 1em;

  z-index: 10;
}

.prompt:hover .hint-text {
  visibility: visible;
}
</style>