如何在其中显示带有 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

你真的有两个问题：

1. 在您的tooltip变量中，您需要放置一些父组件来包装另一个divs，您可以使用 =><></>或<Fragment></Fragment>.

2. 你不需要所有的逻辑来渲染一个简单的tooltip，这里有一个 StackBlitz，你可以在那里看到如何做。

希望这可以帮助。

Answer 3

尝试使用这个

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