パーツ番号 11-04-04 ・ CSSのみ

ヒントバブル（?）

?アイコンにホバー、またはタップ・フォーカスすると説明バブルが出現します。管理画面の項目補足に便利です。

mobilescrollhoverclickcss

プレビュー

ソースコード

HTML

<div class="d11-04-04-field">
          <label>公開ステータス</label>
          <span class="d11-04-04-help" tabindex="0">
            <svg viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><path d="M9.2 9.3a2.8 2.8 0 015.4.9c0 1.9-2.8 2.4-2.8 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="11.8" cy="17" r="1.1" fill="currentColor"/></svg>
            <span class="d11-04-04-bubble">「公開」にすると誰でも閲覧可能になります。下書きは自分だけに表示されます。</span>
          </span>
        </div>

CSS

.d11-04-04{background:#f6f4fb}
        .d11-04-04 .d11-04-04-field{display:flex;align-items:center;gap:8px;background:#fff;padding:16px 20px;border-radius:12px;box-shadow:0 6px 18px rgba(50,30,80,.08)}
        .d11-04-04 .d11-04-04-field label{font-size:14px;color:#3a3350;font-weight:600}
        .d11-04-04 .d11-04-04-help{position:relative;color:#9a7fe0;cursor:help;display:inline-flex;outline:none}
        .d11-04-04 .d11-04-04-bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);width:190px;background:#3a3350;color:#fff;font-size:11px;line-height:1.6;padding:10px 12px;border-radius:8px;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s;box-shadow:0 8px 22px rgba(50,30,80,.25);z-index:2}
        .d11-04-04 .d11-04-04-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#3a3350}
        .d11-04-04 .d11-04-04-help:hover .d11-04-04-bubble,.d11-04-04 .d11-04-04-help:focus .d11-04-04-bubble{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

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