[vue] 이슈 - mouseover 시 나타나는 콘텐츠 번쩍거림(?)

mouseover 시 툴팁이 생기게 작업을 하였다.

 

- 처음 내가 작업한 구조

<tr>
  <td>
       <div
           class="flex items-center h-full"
           @mouseover="toolTipOn"
           @mouseleave="toolTipOn">
           {{ row[col.value] }} 
       </div>
       <vue-tooltip
           v-if=" toolTipOn"
       > {{ row[col.tooltip] }} </vue-tooltip>
  </td>  
</tr>

<div>에 mouseover 시 툴팁이 나타나는 구조이다.

근데 mouseover 할 때마다 툴팁이 번쩍번쩍 거리는 것이다.

왜 그런지 잘 생각해 봤더니.. 툴팁이 나타날 때 마우스가 툴팁영역에 있어서(?) 자꾸 번쩍번쩍 거리는 것이었다.

무슨 뜻이냐면... 마우스 이벤트를 <div>에만 줘서 그런거였다..!

 

- 해결

<tr>
  <td
       @mouseover="toolTipOn"
       @mouseleave="toolTipOn">
       <div
           class="flex items-center h-full">
           {{ row[col.value] }} 
       </div>
       <vue-tooltip
           v-if=" toolTipOn"
       > {{ row[col.tooltip] }} </vue-tooltip>
  </td>  
</tr>

이렇게 이벤트를 감싸주는 요소에 줬더니 tooltip에 마우스가 가 있어도 toolTipOn이 유지가 된다! 

 

 

생각해보면.. 너무 당연한 것인데, 자주 실수하는 것 같아서 기록해둠!