ツールチップ4方向

<div class="tip-grid">
          <button class="tip-btn tip-top" type="button" data-tip="上に表示">上</button>
          <button class="tip-btn tip-bottom" type="button" data-tip="下に表示">下</button>
          <button class="tip-btn tip-left" type="button" data-tip="左に表示">左</button>
          <button class="tip-btn tip-right" type="button" data-tip="右に表示">右</button>
        </div>

.d11-01-04 .tip-grid{display:grid;grid-template-columns:repeat(2,96px);gap:18px}
        .d11-01-04 .tip-btn{position:relative;padding:12px 0;background:#fff;border:1.5px solid #d6dbe8;border-radius:8px;font-size:12.5px;font-weight:700;color:#3a4258;cursor:pointer;font-family:inherit;transition:border-color .25s,color .25s}
        .d11-01-04 .tip-btn:hover{border-color:#5b6bff;color:#5b6bff}
        .d11-01-04 .tip-btn::before{content:attr(data-tip);position:absolute;padding:6px 10px;background:#2b3245;color:#fff;font-size:11px;font-weight:400;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;pointer-events:none;z-index:3}
        .d11-01-04 .tip-btn::after{content:"";position:absolute;border:5px solid transparent;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;pointer-events:none;z-index:3}
        .d11-01-04 .tip-btn:hover::before,.d11-01-04 .tip-btn:hover::after{opacity:1;visibility:visible}
        .d11-01-04 .tip-top::before{bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px)}
        .d11-01-04 .tip-top::after{bottom:calc(100% + 1px);left:50%;transform:translate(-50%,6px);border-top-color:#2b3245}
        .d11-01-04 .tip-top:hover::before,.d11-01-04 .tip-top:hover::after{transform:translate(-50%,0)}
        .d11-01-04 .tip-bottom::before{top:calc(100% + 10px);left:50%;transform:translate(-50%,-6px)}
        .d11-01-04 .tip-bottom::after{top:calc(100% + 1px);left:50%;transform:translate(-50%,-6px);border-bottom-color:#2b3245}
        .d11-01-04 .tip-bottom:hover::before,.d11-01-04 .tip-bottom:hover::after{transform:translate(-50%,0)}
        .d11-01-04 .tip-left::before{right:calc(100% + 10px);top:50%;transform:translate(6px,-50%)}
        .d11-01-04 .tip-left::after{right:calc(100% + 1px);top:50%;transform:translate(6px,-50%);border-left-color:#2b3245}
        .d11-01-04 .tip-left:hover::before,.d11-01-04 .tip-left:hover::after{transform:translate(0,-50%)}
        .d11-01-04 .tip-right::before{left:calc(100% + 10px);top:50%;transform:translate(-6px,-50%)}
        .d11-01-04 .tip-right::after{left:calc(100% + 1px);top:50%;transform:translate(-6px,-50%);border-right-color:#2b3245}
        .d11-01-04 .tip-right:hover::before,.d11-01-04 .tip-right:hover::after{transform:translate(0,-50%)}