メニューでhover時に隠しているログアウトボタンを表示させたいのですが、リンク範囲と合わないのでボタンをクリックする前に消えてしまう

メニューでhover時に隠しているログアウトボタンを表示させ、マウスが外れたら再度非表示にしたいのですが、リンク範囲と合わないので表示させたいボタンをクリックする前にログアウトボタンが消えてしまう。
デザインを再現するにはどのように実装すればいいでしょうか？

  <div class="sidebar">
    <div class="logo-details">
        <div class="logo-details__logo-name"><img src="/assets/img/admin-logo.svg" alt="logo"></div>
        <div class="logo-details__text -bold pt-small-sm">システム</div>
    </div>
    <ul class="nav-list">
      <li>
        <a href="#">
          <img src="/assets/img/admin-icon-1.svg" alt="icon">
          <span class="links_name">login_id123</span>
        </a>
         <p class="tooltip-bg"><span class="p-genric-btn--primary tooltip"><span class="admin-logout-icon"></span>ログアウト<i class="btn-ph-caret-right ph-caret-right"></i></span></p>
      </li>
      <li>
       <a href="#">
        <img src="/assets/img/admin-icon-2.svg" alt="icon">
         <span class="links_name"></span>
       </a>
     </li>
     <li>
       <a href="#">
        <img src="/assets/img/admin-icon-3.svg" alt="icon">
         <span class="links_name">1</span>
       </a>
     </li>
     <li>
       <a href="#">
        <img src="/assets/img/admin-icon-4.svg" alt="icon">
         <span class="links_name">2</span>
       </a>
     </li>
     <li>
       <a href="#">
        <img src="/assets/img/admin-icon-5.svg" alt="icon">
         <span class="links_name">3</span>
       </a>
     </li>
     <li>
       <a href="#">
        <img src="/assets/img/admin-icon-6.svg" alt="icon">
         <span class="links_name">4</span>
       </a>
     </li>
    </ul>
  </div>

  <div class="dashboard">
    <div class="dashboard-header">
      <div class="text"></div>
  </div>

      <div class="dashboard-body">
      <div class="text">Dashboard</div>
  </div>

  </div>

const target = document.querySelector('.tooltip');

target.addEventListener('mouseover', () => {  
　　target.style.opacity = '1';  
}, false);

target.addEventListener('mouseleave', () => {
  　target.style.opacity = '0';   
}, false);

cssは長いので省略

・codepen

https://codepen.io/boo-jp/pen/ExvEqRg