popover 相关问题

我有一个表单，我想在将鼠标悬停在信息 div 上时显示弹出帮助框： info div和popover如下（父div是position:relative）：我有一个表单，我想在将鼠标悬停在信息 div 上时显示弹出帮助框：信息 div 和弹出窗口如下（父 div 是 position: relative）： <div popovertarget="function-help" class="absolute cursor-help right-1 top-0 bottom-0 m-auto rounded-full border-2 border-cyan-400 text-cyan-400 w-1 h-1 p-2 flex justify-center items-center">i</div> <div id="function-help" popover>Here's how to input a function:</div> 我知道如何使用按钮或输入来完成此操作，但如何使用 div 和悬停来完成此操作？如何在用户将鼠标悬停在信息 div 上时显示弹出窗口，并在用户离开时隐藏它？提前致谢！根据我的理解，当用户将鼠标悬停在 div 上时，您尝试使用 i 显示工具提示。如果是这种情况，您可以根据您的要求使用 EventListener 显示/隐藏 div var targetElement = document.querySelector('.icon'); var tooltip = document.getElementById('tooltip'); targetElement.addEventListener('mouseenter', function() { tooltip.style.display = 'block'; }); targetElement.addEventListener('mouseleave', function() { tooltip.style.display = 'none'; }); .container { position: relative; display: inline-block; } .container input { padding-left: 30px; } .container .icon { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; background-color: #39a9db; color: #fff; display: flex; justify-content: center; align-items: center; cursor: help; } .tooltip { display: none; position: absolute; background-color: #333; color: #fff; padding: 5px; border-radius: 5px; font-size: 12px; z-index: 1; right: 0px; top: 25px } <div class="container"> <h3>f(x) = </h3> </div> <div class="container"> <input type="text"> <div class="icon">i</div> <div class="tooltip" id="tooltip">This is a tooltip</div> </div> 我意识到我的困惑。 Popover API 是一项实验性功能，不具有广泛的浏览器兼容性。我的答案允许您在同一页面上有多个弹出窗口。它使用 querySelectorAll 来查找所有 popovertarget 元素。然后它循环遍历每个生成一个变量来保存弹出框元素。然后在鼠标悬停时显示它，在鼠标移开时隐藏它。我个人会使用一个模仿弹出窗口的插件，因为它将具有跨浏览器兼容性。 const popover = document.querySelectorAll("[popovertarget]"); popover.forEach((e) => { const target = document.querySelector("#" + e.getAttribute("popovertarget")); e.addEventListener("mouseover",()=>{ target.showPopover(); }); e.addEventListener("mouseout",()=>{ target.hidePopover(); }); }); <div popovertarget="function-help">popME</div> <div id="function-help" popover>Here's how to input a function:</div> 好的，感谢 @Sai Manoj 的有用回答，我知道我可以使用 div 的 mouseenter 和 mouseleave 方法来触发弹出窗口。这是我的代码： document.getElementById('info-tooltip').onmouseenter = _ => document.getElementById('function-help').showPopover() document.getElementById('info-tooltip').onmouseleave = _ => document.getElementById('function-help').hidePopover() .wrapper { position: relative; width: max-content; } label { display: inline-block; width: 10 rem; } #info-tooltip { position: absolute; top: 0; bottom: 0; right: 4px; cursor: help; margin: auto; border-radius: 100px; border: 2px solid cyan; color: cyan; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; } #function-help:popover-open { position: absolute; bottom: 0; inset: unset; } <div class="wrapper"> <label for="inputFunction">f(x) = </label> <input type="text" id="inputFunction"> <div id="info-tooltip" popovertarget="function-help">i</div> <div id="function-help" popover>Here's how to use this function:</div> </div> 请注意，您可以进一步设置弹出窗口的样式，但您最有可能希望使用 position: absolute（因为默认为 position: fixed）和 inset: unset。

javascript html css popover

回答 3 投票 0

这个 SwiftUI .popover 故障的解决方案是什么？

打开“一”，然后快速点击“二”，然后点击“三”。您将看到 2 和 3 都尝试同时打开弹出窗口，导致不会出现弹出窗口。如果您取消选择其中之一，则另一个...

swiftui popover visual-glitch

回答 1 投票 0

简单的快速颜色选择器弹出框（iOS）

有没有一种简单的方法可以在 Swift 中实现颜色选择器弹出框？我可以利用任何内置 UI 元素来实现此目的吗？

ios swift popover color-picker color-palette

回答 8 投票 0

SwiftUI Popover 背景与材质

我正在尝试创建一个具有半透明材质（常规、薄或超薄）背景的 SwiftUI Popover。显示 Popover 内容背后的内容的一些活力。我尝试添加超...

ios swift swiftui popover

回答 1 投票 0

为什么数据不填充 SwiftUI 中弹出框内的列表？

我在寻找什么我希望有人可以帮助我了解正在发生的事情以及为什么 SwiftUI 在这种情况下会表现得如此。我想做什么我最初是想创造...

swiftui popover swiftui-picker

回答 1 投票 0

不受控制的 Popover Reactstrap 更新状态

这里我使用的是reactstarp的不受控制的弹出窗口，我有类别列表，并且我有一个编辑按钮选项，所以当我单击编辑按钮图标时，不受控制的弹出窗口出现，但现在...

reactjs popover react-state

回答 1 投票 0

Popover API：事件冒泡在 beforetoggle 事件上不起作用？

背景参考关于 Popover API 的 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/API/Popover_API（不要与 Bootstrap 的 popover 混淆）。我有多个弹出窗口，

javascript html dom-events popover

回答 1 投票 0

是否可以在react元素中使用html`popover`属性

我正在搜索 popover API 是否在 React 中可用，但似乎不可用。打开弹出框我正在搜索 popover API 是否在 React 中可用，但似乎不可用。 <button popovertarget="my-popover">Open Popover</button> <div popover id="my-popover">Greetings, one and all!</div> 我在网上搜索过，没有找到任何关于如何单独使用 jsx 来做到这一点的资源 React 本身的核心 API 中没有内置的弹出组件。然而，React 生态系统中有几个第三方库和组件可以提供弹出窗口功能。

reactjs popover

回答 1 投票 0

iOS SwiftUI 需要显示没有“箭头”的 Popover

我需要显示一个选项列表供用户选择。我检查了 Menu、.contextMenu() 和 .popover()。虽然这三个都工作正常，但我无法显示我需要显示的内容，或者我无法...

ios swiftui popover

回答 1 投票 0

CSS 使绝对定位的 HTML 元素不透明，无需设置背景颜色

我的 HTML 看起来像这样： .globalpopup { 边距：0 像素；内边距：2px；位置：绝对；不透明度：1；背景：继承； } &...

html css popover

回答 1 投票 0

bootstrap popover：使用ajax重新加载内容

我在使用ajax 重新加载引导程序弹出窗口的内容时遇到问题。这是一些代码：http://pastie.org/3960102 第二个ajax请求（当我点击“a.close”时）返回更新的内容（我...