客观的

您可以使您的组件返回以下标记

return (
  <div>
    <div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
    <div>
      <div style={tooltipStyle}>this is the tooltip!!</div>
    </div>
  </div>
);

哪里tooltipStyle是这样分配的：

const tooltipStyle = {
  display: this.state.hover ? 'block' : 'none'
}

所以栏现在取决于组件的状态，handleMouseIn并且handleMouseOut您需要更改组件的状态，使工具提示可见。

handleMouseIn() {
  this.setState({ hover: true })
}

handleMouseOut() {
  this.setState({ hover: false })
}

这是工作示例。

您可以通过这篇文章开始深入 React：Thinking in React。

一种选择是在 CSS 中进行。它不是那么灵活，但带有如下标记：

<div className="tooltip-on-hover">Hover here</div>
<div className="tooltip">This is the tooltip</div>

你可以这样做：

.tooltip {
  ...
  visibility: hidden;  /* Or display: none, depending on how you want it to behave */
}

.tooltip-on-hover:hover + .tooltip {    /* Uses the adjacent sibling selector */
  visibility: visible;  /* Or display: block */
}

例子：

.tooltip { display: none; }
.tooltip-on-hover:hover + .tooltip { display: block; }

<div class="tooltip-on-hover">Hover here</div>
<div class="tooltip">This is the tooltip</div>

您还可以将工具提示嵌套在元素内，以便您可以使用普通的后代选择器，如.tooltip-on-hover:hover .tooltip. 您甚至可以使用 a::before或::after伪元素，有关于如何执行此操作的指南。

安装 npm 包：

npm install react-tooltip

用法：

import ReactTooltip from "react-tooltip";

<div data-tip="msg to show" data-for='toolTip1' data-place='top'>Tooltip</div>
<ReactTooltip id="toolTip1" />

我认为无论您想显示为工具提示，只需将其添加到要显示它的 div 的“标题”。

例如：

<div title="I am the tooltip text">I am the div where you should hover</div>

但是，如果它是一个定制设计的 div，则按照之前给出的答案进行。

您还可以使用React Mapple ToolTip易于使用和自定义的，并且还带有预定义的主题。

免责声明：我是这个库的作者

reactjs-mappletooltip