javascript - 如何使用 CSS 或 JS 将 block 元素的工具提示居中？

Question

我正在尝试创建一个自定义 Tooltip 组件，其中工具提示的方向通过 Prop 传递:

Hello, <Tooltip>Right tooltip (Hover).</Tooltip>

我制作了这个组件，它可以很好地处理内联元素，但是当涉及到带有 block 元素的组件时会出现位置问题:

Hello, <Tooltip><div className="box">This has click event tooltip with a block element.</div></Tooltip>

问题是当工具提示将 block 元素作为其子元素时，工具提示会错位并完全中断。

是否有一种方法可以将工具提示定位在组件的中心边缘，就像它处理内联文本的方式一样？

我该如何解决这个问题？

Answer 1

我已经改变了margin-bottom: 0;至 margin-bottom: -6px;用于将工具提示三 Angular 形放置在工具提示边缘的中心。

[data-tooltip-dir="left"]:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: -6px;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

[data-tooltip-dir="right"]:before {
  margin-bottom: -6px;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

然后

.tooltip {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

这是 sandbox包含固定版本。希望能解决您的问题!
更新
对于 Next.js 和样式 jsx
访问 <style jsx> 中的数据属性有点不同.insted的 [data-tooltip-dir="left"]你应该像这样在 [] 前面使用类名 .tooltip[data-tooltip-dir="left"]
临时 sandbox