vue3 타입스크립트 툴팁 만들기

:title 쓰면 이미지의 title과 똑같이 나옴

title
<span id="orgnPrjNm"
      v-if="prjNm.length <= 25">
  {{ prjNm }}
</span>
<span v-else>
  <span :title="prjNm" style="cursor: pointer">
    {{ prjNm.slice(0, 20) }}...
  </span>
</span>


만든 툴팁
<span id="orgnPrjNm"
      v-if="prjNm.length <= 25">
  {{ prjNm }}
</span>
<span v-else>
  <span :data-tooltip="prjNm" style="cursor: pointer">
    {{ prjNm?.slice(0, 20) }}...
  </span>
</span>

[data-tooltip] {
  position: relative;
}

[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  transition: all 0.2s ease;
  font-size: 12px;
  letter-spacing: -1px;
  margin-top: 55px;
  pointer-events: none;
}

[data-tooltip]:before {
  height: auto;
  width: 400px;
  white-space: pre-wrap;
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 5px;
  color: #fff;
  background: #99abbf;
  box-shadow: 0 3px 8px rgba(165, 165, 165, 0.5);
  line-height: 1.2;
  z-index: 9999;
  pointer-events: none;
}

[data-tooltip]:not([data-tooltip=""]):hover:before {
  visibility: visible;
  opacity: 1;
  top: -30px;
  pointer-events: none;
}

[data-tooltip]:not([data-tooltip=""]):hover:after {
  visibility: visible;
  opacity: 1;
  top: -8px;
  pointer-events: none;
}