ツアーツールチップ

<div class="d11-04-01-stage">
          <div class="d11-04-01-ui">
            <button class="d11-04-01-btn" data-t="1">ダッシュボード</button>
            <button class="d11-04-01-btn" data-t="2">投稿を書く</button>
            <button class="d11-04-01-btn" data-t="3">設定</button>
          </div>
          <div class="d11-04-01-tip">
            <p class="d11-04-01-txt">ここから記事を新規作成できます。</p>
            <div class="d11-04-01-nav">
              <span class="d11-04-01-step">1 / 3</span>
              <button class="d11-04-01-next">次へ</button>
            </div>
            <span class="d11-04-01-arrow"></span>
          </div>
        </div>

.d11-04-01{background:#f4f6fb}
        .d11-04-01 .d11-04-01-stage{position:relative;width:100%;max-width:300px}
        .d11-04-01 .d11-04-01-ui{display:flex;flex-direction:column;gap:10px}
        .d11-04-01 .d11-04-01-btn{padding:12px 14px;border:1px solid #d5dbe8;border-radius:8px;background:#fff;font-size:13px;text-align:left;color:#3a4256;cursor:default;transition:box-shadow .25s,border-color .25s}
        .d11-04-01 .d11-04-01-btn.on{border-color:#5b7cfa;box-shadow:0 0 0 3px rgba(91,124,250,.25)}
        .d11-04-01 .d11-04-01-tip{position:absolute;left:calc(100% + 14px);width:180px;background:#2b3350;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:0 8px 20px rgba(20,28,60,.25);transition:top .35s cubic-bezier(.4,1.3,.5,1)}
        .d11-04-01 .d11-04-01-txt{font-size:12px;line-height:1.5;margin-bottom:8px}
        .d11-04-01 .d11-04-01-nav{display:flex;align-items:center;justify-content:space-between}
        .d11-04-01 .d11-04-01-step{font-size:11px;opacity:.7}
        .d11-04-01 .d11-04-01-next{background:#5b7cfa;color:#fff;border:none;border-radius:6px;padding:5px 12px;font-size:12px;cursor:pointer}
        .d11-04-01 .d11-04-01-arrow{position:absolute;left:-6px;top:16px;width:12px;height:12px;background:#2b3350;transform:rotate(45deg)}

(function(){
        var root=document.querySelector('#item-11-04-01 .d11-04-01');
        if(!root)return;
        var btns=root.querySelectorAll('.d11-04-01-btn'),tip=root.querySelector('.d11-04-01-tip'),txt=root.querySelector('.d11-04-01-txt'),step=root.querySelector('.d11-04-01-step'),next=root.querySelector('.d11-04-01-next');
        var msgs=['ここから記事を新規作成できます。','公開前の下書きはここで管理します。','サイト全体の設定を変更できます。'];
        var i=0;
        function place(){
          btns.forEach(function(b,n){b.classList.toggle('on',n===i)});
          var b=btns[i];
          tip.style.top=b.offsetTop+'px';
          txt.textContent=msgs[i];
          step.textContent=(i+1)+' / 3';
        }
        next.addEventListener('click',function(){i=(i+1)%3;place()});
        place();
      })();