使用ReactJS的工具提示div

Question

目标

我有一个div，我想使用reactjs作为工具提示。

HTML

<div>on hover here we will show the tooltip</div>
<div>
    <div class="tooltip_custom">this is the tooltip!!</div>
</div>

我习惯使用带有ng-show条件的<div>的angularjs，我想知道在reactjs中是否有这样的绑定，或者我怎么能做这个功能？

由于

Answer 1

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

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

以下是工作示例：http://codepen.io/anon/pen/YwWRVb

您可以使用本文开始在React中潜水：https://facebook.github.io/react/docs/thinking-in-react.html

Answer 2

一种选择就是在CSS中完成。它不是那么灵活，但标记如下：

<div class="tooltip-on-hover">Hover here</div>
<div class="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这样的普通后代选择器。您甚至可以使用::before或::after伪元素，有关如何执行此操作的指南。

Answer 3

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

https://www.npmjs.com/package/reactjs-mappletooltip

Answer 4

安装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" />

Answer 5

您可以使用react-tooltip软件包。超级好用且方便。

安装：npm我反应太尖了。

示例： 1.导入：

import ReactTooltip from "react-tooltip"

1. 将其包含在您的组件中

   <div className="createContent"> **<ReactTooltip />** <div className="contentPlaceholder">

2. 将工具提示添加到按钮/ div或任何元素： data-tip =“添加工具提示消息”

<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>

程序包网址：https://www.npmjs.com/package/react-tooltip

Answer 6

我想无论您想显示什么工具提示，只要将其添加到要显示它的div的“标题”即可。

例如：

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

但是，如果它是自定义设计的div，那么请按照之前给出的答案进行操作。

Answer 7

如果在项目中使用react-bootstrap，请在工具提示中使用https://react-bootstrap.github.io/components/overlays/叠加层。

虽然需要使用MouseEnter和MoverLeave。

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