时间戳

首页 > 解决方案 > 如何使用 CSS 或 JS 将块元素的工具提示居中？

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

问题描述

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

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

我制作的这个组件可以很好地与内联元素一起使用，但在涉及到带有block元素的组件时会出现位置问题：

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

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

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

我怎样才能解决这个问题？

标签： javascriptcssreactjs

解决方案

我已将工具提示三角形更改 margin-bottom: 0;为margin-bottom: -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);
}

然后

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

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

推荐阅读