DEV Community
·
在WordPress循环中处理多个CSS锚点和popover
💡
原文约900字/词，阅读约需4分钟。
📝
内容提要
在WordPress中处理多个tooltip和popover时，需确保每个tooltip和对应的popover具有唯一的ID和anchor-name，以避免冲突。通过使用get_the_id()生成唯一ID，并在CSS中定义相应的anchor-name，可以实现正确的关联和定位。尽管存在一些挑战，但此方法有效。
🎯
关键要点
- 在WordPress中处理多个tooltip和popover时，需要确保每个tooltip和popover具有唯一的ID和anchor-name。
- 使用get_the_id()生成唯一ID，并在CSS中定义相应的anchor-name，以避免元素之间的冲突。
- popover需要一个唯一的ID，目标元素需要引用该ID，确保正确关联。
- 每个anchor-name也必须唯一，以便目标元素正确附加到其对应的锚点。
- 在循环中生成唯一的ID和anchor-name是一个挑战，需要确保所有元素正确链接。
- 定义HTML结构时，tooltip应放置在<details>元素内，以表示单个页面。
- 基本的CSS样式需要重置popover的默认边框，并确保其正确定位。
- 建议使用Chrome浏览器，因为Safari和Firefox尚未完全支持相关功能。
- 通过CSS中的锚点定位tooltip，确保其内容与按钮相邻。
- 使用get_the_id()生成唯一的popover ID，以避免所有tooltip指向同一popover。
- 在CSS中为每个tooltip生成唯一的anchor-name，以确保正确定位。
- 可以使用动态生成的<style>标签来设置每个tooltip的样式。
- Bramus提出了一种ident()函数来自动生成唯一的anchor-name，但尚未实现。
➡️
