用 popover="hint" 打造友好的 HTML 提示：一招讓界面更“懂人”

作者：dev 2025-09-04 04:00:00

今天的這段“HTML 小魔法”，能幫你構建上下文友好的交互提示，不喧賓奪主、不干擾主體流程。下個項目不妨一試，也歡迎分享實戰體驗與坑點。

最近翻到一篇文章：想把網頁做得“無感且順滑”并不難，難的是分層 UI（尤其是 tooltip / popover）寫著寫著就亂了套。追求干凈、直覺的體驗沒問題，但要把多個彈層疊放而不打斷用戶流，常常是噩夢。此時，HTML 的 popover="hint" 成了救場“隊友”。

它允許在不關閉其它 popover 的情況下，打開類似提示/預覽的輕量界面；也就是說，能在不搶走焦點的前提下補充上下文。

先看實際效果

圖片

HTML popover="hint" 示例（運行中）

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      [popover="auto"] {
        inset: unset;
        position: absolute;
        top: 100px;
        justify-self: anchor-center;
        margin: 0;

        text-align: center;
        padding: 8px;
      }

      [popover="hint"] {
        inset: unset;
        position: absolute;
        top: calc(anchor(bottom) + 5px);
        justify-self: anchor-center;
        margin: 0;

        padding: 8px;
        border-radius: 6px;
        background: #271717;
        color: whitesmoke;
        box-shadow: 1px 1px 3px #999;
        border: none;
      }

      /* 幫助段落樣式 */
      .help-para {
        position: absolute;
        top: 16px;
        left: 16px;
        background: #eee;
        font-size: 0.8rem;
        line-height: 1.3;
        width: 50%;
        max-width: 600px;
        margin: 0;
        padding: 16px;
        box-shadow: 1px 1px 3px #999;
      }

      @media (max-width: 640px) {
        .help-para {
          width: auto;
          right: 16px;
        }
      }

      body {
        margin: 50px;
        padding: 10px;
        border: 2px solid lightblue;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <section id="button-bar">
        <button
          popovertarget="submenu-1"
          popovertargetaction="toggle"
          id="menu-1"
        >
          Menu A
        </button>

        <button
          popovertarget="submenu-2"
          popovertargetaction="toggle"
          id="menu-2"
        >
          Menu B
        </button>

        <button
          popovertarget="submenu-3"
          popovertargetaction="toggle"
          id="menu-3"
        >
          Menu C
        </button>
      </section>
    </div>
    <div id="submenu-1" popover="auto">
      <button>Option A</button><br /><button>Option B</button>
    </div>
    <div id="submenu-2" popover="auto">
      <button>Option A</button><br /><button>Option B</button>
    </div>
    <div id="submenu-3" popover="auto">
      <button>Option A</button><br /><button>Option B</button>
    </div>

    <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
    <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
    <div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>

    <script text="text/javascript">
      const tooltips = document.querySelectorAll(".tooltip");
      const btns = document.querySelectorAll("#button-bar button");

      function addEventListeners(i) {
        btns[i].addEventListener("mouseover", () => {
          tooltips[i].showPopover({ source: btns[i] });
        });

        btns[i].addEventListener("mouseout", () => {
          tooltips[i].hidePopover();
        });

        btns[i].addEventListener("focus", () => {
          tooltips[i].showPopover({ source: btns[i] });
        });

        btns[i].addEventListener("blur", () => {
          tooltips[i].hidePopover();
        });
      }

      for (let i = 0; i < btns.length; i++) {
        addEventListeners(i);
      }
    </script>
  </body>
</html>

就是這么簡單：少量 HTML + CSS + JS，就能得到一個上下文感知的小提示——鼠標懸停顯示、移開即收起，既溫柔又不打擾。

還有細節值得說

設置 popover="hint" 的提示，與 popover="auto" 或 popover="manual"并不相同。

它是輕可關閉（light-dismissible）的：點擊外部或按下 ESC 即退出；
它不會把 auto 彈層一并關掉；
但它會關閉其他 hint，避免屏幕被提示“刷屏”。

快速對比表

Feature	`popover=auto`	`popover=hint`	`popover=manual`
Light Dismiss	Yes	Yes	No
Closes Others	Hints, Autos	Other Hints	Nothing
Nesting	Yes	Special	N/A

嵌套：最容易“繞暈”的一處

有時 tooltip 是“獨立一顆”，有時卻是**“富提示”（像 GitHub 頭像預覽那樣內部還有細小提示）。這種場景下，內層提示不應**把父級直接關掉。

可以這么記：

系統維護兩套“棧”：

auto stack：為 popover="auto"；
hint stack：為獨立的 hint。

**auto 內的 hint**：并入 auto stack；
**hint 內的 hint**：仍留在 hint stack；
**hint 里不能再嵌 auto**。

把它當“圖層”去理解就好：hint 在 auto 里，跟著父級走；此時鼠標碰到其它不相關的 hint，不會拆父層結構。

一句話總結

今天的這段“HTML 小魔法”，能幫你構建上下文友好的交互提示，不喧賓奪主、不干擾主體流程。下個項目不妨一試，也歡迎分享實戰體驗與坑點。

感謝閱讀，我們下次見，帶來更多實用的 HTML 小技巧。

責任編輯：武曉燕來源：大遷世界

HTML 上下文主體