使用ReactJS的工具提示div

Question

目的

我有一个div,我想用反应器做一个工具提示.

HTML

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

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

谢谢

Answer 1

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

例如：

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

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

Answer 2

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

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 3

一种选择就是在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 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 Mapple ToolTip它易于使用和自定义，并且还带有预定义的主题。

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

Reactjs-mappletooltip