Javascript 如何使用CSS或JS将块元素的工具提示居中？

我试图创建一个自定义的

工具提示
组件，其中工具提示的方向通过道具传递：

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

问题在于，当工具提示将
块
元素作为其子元素时，工具提示会错位并完全断开

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

如何修复此问题？
我已更改
页边距底部：0至
页边距底部：-6px用于将工具提示三角形放置在工具提示边的中心

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

然后

这是包含固定版本的。希望能解决您的问题！


更新


对于Next.js和样式jsx


根据
中的数据属性有点不同
[data tooltip dir=“left”]
您应该像这样在[]前面使用类名
.tooltip[数据tooltip dir=“left”]


暂时的
你想做什么？你想在块的中心对齐工具提示吗？是的，@AmareshSM表示右、左、下、上。等等，哇。我想这是可行的。我需要在生产中测试它，但这似乎很好。我不明白这是怎么解决的。奇怪。我不知道为什么，但当我把它添加到我的实际代码中时，工具提示会粘在元素的底部。唯一的区别是工具提示正在包装元素。我还删除了所有的样式，问题仍然存在。你知道为什么会发生这种情况吗？事实上，经过一些测试，如果css在它自己的style.css文件中，那么它的css似乎工作得很好。然而，如果我要将其添加到一个块中，它会断开。嗯，这似乎是下一个/jsx问题。这不是问题，别担心。请更新您的问题
[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;
}