百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

用HTML内置的popover属性做一个提示窗

liuian 2025-09-09 04:34 3 浏览

如何用Popover魔法在HTML中创建用户友好的提示

最近我在阅读一篇关于如何构建"让用户感觉毫不费力"的Web界面的文章，但像tooltip这样的分层UI元素可能成为编码噩梦。

我热爱那种简洁直观的体验，但不破坏操作流程的分层提示实现起来却很麻烦。HTML中的popover=hint属性成了我的新宠。

这个属性允许你打开工具提示或预览等UI元素，同时不会关闭其他已打开的提示。这是一种轻量级的上下文展示方式，不会抢占用户的注意力焦点。

实战演示

让我们通过一个简单示例来理解其底层工作原理。

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;
      }

      /* Styling help para */

      .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>

就是这样！通过简单的JavaScript、CSS和HTML就实现了一个具有上下文感知能力的用户界面。当鼠标悬停时提示会出现，移开后又会自动消失。

但还有更多惊喜！

使用popover=hint设置的提示弹窗与popover=auto或popover=manual有所不同。

它们属于轻量级可关闭类型，意味着点击外部区域或按ESC键就能关闭。它们不会关闭auto类型的弹窗，但会关闭其他提示以避免界面混乱。

快速对比表：

功能特性

Popover=Auto

Popover=Hint

Popover=Manual

轻量关闭

支持

支持

不支持

关闭其他弹窗

提示和自动弹窗

仅其他提示

无影响

嵌套支持

支持

特殊处理

不适用


嵌套：棘手的部分

提示嵌套可能会变得复杂。大多数工具提示都是独立的，但有时你可能需要像GitHub个人资料预览那样的"富"提示，其中包含自身也带有提示的元素。这些内部提示不应关闭父级提示。

关键规则：

  • 存在两个堆栈："auto堆栈"（用于popover=auto）和"提示堆栈"（用于独立提示）
  • auto弹窗内的提示会加入auto堆栈
  • 提示内的其他提示会留在提示堆栈中
  • auto弹窗不能嵌套在提示内部

我知道这可能有点令人困惑。记住这个技巧：把它想象成图层。auto弹窗内的提示会跟随其父级，因此悬停无关提示不会破坏这种关联。

相关推荐

Html中Css样式Ⅱ_html+css+

元素的定位（方式五种定位方式）:静态定位:position:static;相对定位:position:relative;绝对定位:position:absolute;固定定位:position...

HTML 标签和属性值的基本格式_html标签及属性的语法规则

HTML:HyperTextMarkupLanguage超文本标记语言HTML代码不区分大小写,包括HTML标记、属性、属性值都不区分大小写;任何空格或回车键在代码中都无效，插入空格或回车有...

基于Visual Studio C#语言开发上位机，做定制设计后有多好看

...

C#中使用Halcon开发视觉检测程序教程

一、环境准备1.安装Halcon从Halcon官方网站下载适合你操作系统的安装包，按照安装向导完成安装。安装过程中，记住安装路径，后续配置环境时会用到。2.配置VisualStudio项目打开V...

【开源】C#功能强大，灵活的跨平台开发框架 - Uno Platform

前言今天给广大网友分享一个基于C#开源、功能强大、灵活的跨平台开发框架，她就是：UnoPlatform。通过UnoPlatform，开发者可以利用单一代码库实现多平台兼容，极大地提高了开发效率和...

C# 的发展简史_c#的发展前景

1.C#的诞生和初期（2000-2005）2000年：在微软的PDC大会上，由AndersHejlsberg首次公开展示了C#语言。2002年：微软发布了.NETFramework1.0，其...

Visual Studio 2010-C#跟西门子1200(Sharp7)窗体控制②-启动按钮

VisualStudio2010--C#跟西门子1200(Sharp7)窗体控制②--启动按钮上期回顾（上期主要是新建窗体应用程序，添加sharp7的类库并引用，建立一个button按钮）：本期将...

Visual Studio窗口布局混乱后的恢复与优化指南

在使用VisualStudio进行开发时，我们常因误操作（如拖拽窗口、关闭面板、多显示器切换）导致界面布局混乱，代码编辑器、解决方案资源管理器、属性面板等组件“错位”，严重影响开发效率。本文将针对布...

使用Visual Studio 2017为AutoCAD创建一个c#模板

本教程的目标是展示如何在VisualStudio2017中创建AutoCAD的c#项目模板，该模板允许在调试模式下从VisualStudio加载DLL来自动启动AutoCAD。本文展示的示例使用...

IT科技-续3Visual Studio2019-C#实战练习

上次完成了登录页面的窗体设计，本次完成管理界面的设计。第一步ComBox控制深度操作点击编辑选项，加入预定选项，完成操作。第二步复制Buttons控件依次为保存、删除、重置、编辑按钮属性设置，参考...

如何在 C# 中将文本转换为 Word 以及将 Word 转换为文本

在现代软件开发中，处理文档内容是一个非常常见的需求。无论是生成报告、存储日志，还是处理用户输入，开发者都可能需要在纯文本与Word文档之间进行转换。有时需要将文本转换为Word，以便生成结构化的...

简短的C#入门教程 # C# 入门教程 C#(读作...

简短的C#入门教程#C#入门教程C#（读作CSharp）是一种由Microsoft开发的多范式编程语言，它具有广泛的应用，特别是在Windows平台上。本教程将介绍C#的基础知识，以帮助您入门这...

JavaScript中this指向各种场景_前端中this的指向

在JavaScript中，this的指向是一个核心概念，其值取决于函数的调用方式，而非定义位置（箭头函数除外）。以下是this指向的常见场景及具体说明：1.全局作用域中的this在全局作用域（非...

微信WeUI设计规范文件下载及使用方法

来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信Web开发量身设计，可以令用户的使用感知...

JavaScript技术:如何动态添加事件?

随着前端技术的不断发展，JavaScript已经成为了不可或缺的一部分，它可以让网页变得更加流畅和美观。但是，在JavaScript中动态添加事件还是一个比较困难的问题，为此，本文将从入门到精通，介绍...

一周热门
最近发表
标签列表