말풍선 UI 마우스 호버 기능 만들기

html

<div id="balloon-wrap">
            <ul class="balloon">
            	<c:choose>
			        <c:when test="${empty sessionScope.principal}">
		                <li><a href="/loginForm">로그인</a></li>
		                <li><a href="/joinForm">회원 가입</a></li>
	                </c:when>
	    	        <c:otherwise>
			            <li><a href="/logout">로그아웃</a></li>
			            <li><a href="/api/user/${sessionScope.principal.id}/mypage?key=userinfo">마이페이지</a></li>
			            <li><a href="/board/saveForm">리뷰쓰기</a></li>
		            </c:otherwise>
	            </c:choose>
        	</ul> 
        </div>

css

#balloon-wrap{
  width: 180px;
  height: 100px;
  /* background-color:pink; */
  position:absolute;
  top:75px;
  right:3%;
  z-index: 99;
}

#balloon-wrap a{
  color: #fff;
}

.balloon {  
  position:absolute; 
  width:170px; 
  height:auto;
  background:#666; 
  border-radius: 20px;
  text-align: center;
  display: none;
  padding: 0;
 }

 .balloon:after { 
  border-top:0px solid transparent; 
  border-left: 10px solid transparent; 
  border-right: 10px solid transparent; 
  border-bottom: 10px solid #666; 
  content:""; 
  position:absolute;
  top:-10px;
  left:100px;  
 }

.balloon li{
   padding :10px;
}

 .balloon li:hover a{ 
  text-decoration: underline;
 }

js

// 말풍선 이벤트
  $('header .bi-person-fill').mouseenter(function () {
    $('.balloon').css({
      display: 'block'
    });
  });

  $('header .balloon').mouseover(function () {
    $('.balloon').css({
      display: 'block'
    });
  });

  $('header #balloon-wrap').mouseout(function () {
    $('.balloon').css({
      display: 'none'
    });
  });

  $('.bi-heart-fill, .ham-btn').mouseenter(function(){
    $('.balloon').css({
      display: 'none'
    });
  });