Javascript 带有ReactJS的工具提示div 客观的

我有一个div，我想让它像reactjs的工具提示一样

HTML

在此处悬停时，我们将显示工具提示
这是工具提示！！

我习惯于在

上使用带有条件的

ng show

来定义angularjs，我想知道reactjs中是否有这样的绑定，或者我如何实现这个功能

---

谢谢

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

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

因此，工具提示取决于组件状态，现在在

handleMouseIn

和

handleMouseOut

中，您需要更改组件状态以使工具提示可见

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

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

这里有工作

---

您可以开始阅读本文：。

一个选项就是在CSS中完成它。它没有那么灵活，但有如下标记：

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

例如：

.tooltip{display:none；}
.hover上的工具提示：hover+。工具提示{display:block；}

将鼠标悬停在这里
这是工具提示

您也可以使用

React-Mapple工具提示

，该工具提示易于使用和自定义，还附带预定义的主题

免责声明：我是这个图书馆的作者

---

在这种情况下，如果您在项目中使用react引导，请使用工具提示中的覆盖

不过需要使用MouseEnter和Moverleve

<OverlayTrigger
  placement="right"
  delay={{ show: 250, hide: 400 }}
  overlay={renderTooltip}>
   <div>on hover here we will show the tooltip</div>
</OverlayTrigger>

在此处悬停时，我们将显示工具提示

您可以使用react工具提示包。超级容易使用和方便也

安装：npm i-TIP

例如： 1.导入它：

import ReactTooltip from "react-tooltip"

将其包含在组件中：

****

将工具提示添加到按钮/div或任何元素：数据提示=“添加工具提示消息”

this.onAddChild（）}>+

程序包url:

安装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的“title”中即可

例如：

我是你应该盘旋的地方

---

但是如果它是一个定制设计的div，那么就按照前面给出的答案去做。

谢谢，如果我想让外部div有自己的内容以html的形式呈现在外部，我只想添加hover的行为，，所以说这个悬停功能可以是工具提示的可重用模块？我的意思是我不想在我的reactjs代码中构建onMouseOver div，我只想在上面添加悬停行为，可以吗？@sisimh你可以使用组合，类似于包装器的东西，它可以帮助你实现这一点，而不用在多个地方重复你自己。尽管这取决于您的具体需求，但工作示例不再有效。您需要从Codepen而不是自定义URL导入React。缺少一个公开信息，因为它是您的库。很方便，但是会弄乱div的精确对齐。您应该使用

className

而不是

class

来进行React。@kojow7如果我们谈论的是JSX，这是正确的，很好。我只是把它称为标记，从技术上讲，它可能只是HTML输出（特别是因为我的答案中没有特定于React的内容），它模仿了问题中所写的“HTML”。我尝试了一下，工作起来很有魅力。谢谢这个例子！！！

import ReactTooltip from "react-tooltip"

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 title="I am the tooltip text">I am the div where you should hover</div>