픽리스트 글자 보였다 안 보였다 툴팁

<template>
  <div class="pick-list">
    <div class="pick-list-item" v-for="item in items" :key="item.id" @mouseover="showTooltip($event, item.name)" @mouseleave="hideTooltip">
      {{ item.name }}
    </div>
    <div v-if="tooltip.visible" class="tooltip" :style="{ top: tooltip.top + 'px', left: tooltip.left + 'px' }">
      {{ tooltip.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'This is a very long text that should be truncated' },
        { id: 2, name: 'Short text' },
        { id: 3, name: 'Another long text that needs truncation' },
      ],
      tooltip: {
        visible: false,
        text: '',
        top: 0,
        left: 0,
      }
    };
  },
  methods: {
    showTooltip(event, text) {
      this.tooltip.text = text;
      this.tooltip.top = event.clientY + 10;
      this.tooltip.left = event.clientX + 10;
      this.tooltip.visible = true;
    },
    hideTooltip() {
      this.tooltip.visible = false;
    }
  }
};
</script>

<style>
.pick-list {
  width: 300px; /* pick list의 너비를 고정 */
}

.pick-list-item {
  width: 100%;
  overflow: hidden; /* 넘치는 텍스트를 숨김 */
  text-overflow: ellipsis; /* 생략 부호 추가 */
  white-space: nowrap; /* 텍스트를 한 줄로 고정 */
  border: 1px solid #ccc; /* 아이템 스타일을 위한 테두리 추가 (옵션) */
  padding: 8px; /* 아이템에 패딩 추가 (옵션) */
  box-sizing: border-box; /* 패딩과 테두리를 포함하여 너비 계산 */
  position: relative;
}

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1000;
}
</style>