如何在其中显示带有jsx内容的工具提示-Reactjs

Question

我想在悬停时显示工具提示，该工具提示包含 html jsx 内容。我使用 ReactDOMServer.renderToStaticMarkup 将 jsx 转换为字符串，但工具提示的最终结果是：

<div>ABC</div>
 <div>ABC description</div>
  <div>ABC refreshed 1 min ago</div>

我希望工具提示显示 html 中的内容而不包括标签。我该怎么做？

jsx:

render() {
  let tooltip = (
  <div>ABC</div>
 <div>ABC description</div>
  <div>ABC refreshed 1 min ago</div>
)
  return (
      <div><span data-tip={ReactDOMServer.renderToStaticMarkup(tooltip)}>ABC info</span></div>
  )
}

Answer 1

将它放在普通的 html 元素中，并使用 css 选择器在另一个元素悬停时显示它。这是一个例子：

.element {
  position: relative;
}

.tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 3px;
  border: 1px solid black;
}

.element:hover .tooltip {
  display: block;
}

<span class="element">
  Hover me
  <span class="tooltip">I appear on hover!</span>
</span>

这个非常简单，不需要任何React中的js逻辑。

Answer 2

尝试使用这个

<div data-toggle="tooltip" data-placement="top">Your Content</div>

Answer 3

你真的有两个问题:

在您的 tooltip 变量中，您需要放置一些父组件来包裹另一个 divs，您可以使用 => <></> 或 <Fragment></Fragment>.
您不需要所有这些逻辑来呈现一个简单的 tooltip，here's 一个 StackBlitz，您可以在其中了解如何做到这一点。

希望对您有所帮助。

如何在其中显示带有jsx内容的工具提示-Reactjs

How to show tooltip with jsx content inside it-Reactjs

javascript

reactjs

react-dom