フォーム内ヘルプ吹き出し

<div class="d04-03-08-wrap">
          <span class="d04-03-08-label">
            招待コード
            <button type="button" class="d04-03-08-help" aria-label="ヘルプを表示">?</button>
          </span>
          <input type="text" class="d04-03-08-input" placeholder="例: ABC-1234">
          <div class="d04-03-08-pop">メールに記載された8桁の招待コードを入力してください。お持ちでない場合は事務局までお問い合わせください。</div>
        </div>

.d04-03-08-wrap{position:relative;width:min(280px,100%)}
        .d04-03-08-label{
          display:flex;align-items:center;gap:6px;margin:0 0 8px;
          font-size:13px;color:#444;
        }
        .d04-03-08-help{
          width:18px;height:18px;border-radius:50%;border:none;background:#d5d9e0;
          color:#555;font-size:11px;font-weight:700;cursor:pointer;line-height:1;
          display:flex;align-items:center;justify-content:center;
        }
        .d04-03-08-help:hover{background:#4a6cf7;color:#fff}
        .d04-03-08-input{
          width:100%;box-sizing:border-box;padding:11px 12px;font-size:14px;
          border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;
        }
        .d04-03-08-input:focus{border-color:#4a6cf7}
        .d04-03-08-pop{
          position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:5;
          padding:12px 14px;font-size:12px;line-height:1.6;color:#445;
          background:#fff;border:1px solid #e2e6ee;border-radius:10px;
          box-shadow:0 10px 25px rgba(30,40,80,.15);
          opacity:0;visibility:hidden;transform:translateY(-6px);
          transition:opacity .2s,transform .2s,visibility .2s;
        }
        .d04-03-08-pop.is-open{opacity:1;visibility:visible;transform:translateY(0)}

(function(){
        var wrap=document.querySelector('.d04-03-08-wrap');
        if(!wrap)return;
        var help=wrap.querySelector('.d04-03-08-help');
        var pop=wrap.querySelector('.d04-03-08-pop');
        help.addEventListener('click',function(){
          pop.classList.toggle('is-open');
        });
        document.addEventListener('click',function(e){
          if(!wrap.contains(e.target))pop.classList.remove('is-open');
        });
      })();