パーツ番号 09-15-11 ・ CSSのみ

獲得条件付きツールチップカード

バッジアイコンに獲得条件を説明する吹き出しを添えた静止見本です。実績一覧ページでカーソルを乗せなくても条件が分かる説明表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-11-wrap">
          <div class="d09-15-11-badge">
            <svg viewBox="0 0 24 24" width="24" height="24" fill="#fff"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
          </div>
          <div class="d09-15-11-tip">
            <p class="d09-15-11-t-title">投稿マスター</p>
            <p class="d09-15-11-t-desc">記事を50件投稿すると獲得できます</p>
            <span class="d09-15-11-arrow"></span>
          </div>
        </div>

CSS

.d09-15-11-wrap{display:flex;align-items:center;gap:0}
        .d09-15-11-badge{flex:none;width:50px;height:50px;border-radius:50%;background:linear-gradient(145deg,#f59e0b,#b45309);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.18)}
        .d09-15-11-tip{position:relative;margin-left:14px;background:#1e293b;border-radius:8px;padding:10px 14px;width:150px;box-sizing:border-box}
        .d09-15-11-arrow{position:absolute;left:-6px;top:50%;margin-top:-6px;width:12px;height:12px;background:#1e293b;transform:rotate(45deg)}
        .d09-15-11-t-title{margin:0 0 4px;font-size:12px;font-weight:800;color:#fff}
        .d09-15-11-t-desc{margin:0;font-size:11px;color:#cbd5e1;line-height:1.4}

クラス名 .d09-15-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。