Javascript 带有 ReactJS 的工具提示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34423644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
tooltip div with ReactJS
提问by sisimh
objective
客观的
I have a div that I want to make act like a tooltip with reactjs.
我有一个 div，我想让它像带有 reactjs 的工具提示一样。
HTML
HTML
<div>on hover here we will show the tooltip</div>
<div>
<div class="tooltip_custom">this is the tooltip!!</div>
</div>
I am used to angularjs using the ng-showwith a condition on the <div>, I was wondering if there is such binding in reactjs , or else how can I do this functionality ?
我习惯于在 angularjs 上使用ng-show带有条件的<div>，我想知道 reactjs 中是否有这样的绑定，否则我该怎么做这个功能？
Thanks
谢谢
回答by nvartolomei
You can make your component to return the following markup
您可以使您的组件返回以下标记
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>
);
Where tooltipStyleis assigned like this:
哪里tooltipStyle是这样分配的：
const tooltipStyle = {
display: this.state.hover ? 'block' : 'none'
}
So tooltip depends on component state, now in handleMouseInand handleMouseOutyou need to change component state to make tooltip visible.
所以栏现在取决于组件的状态，handleMouseIn并且handleMouseOut您需要更改组件的状态，使工具提示可见。
handleMouseIn() {
this.setState({ hover: true })
}
handleMouseOut() {
this.setState({ hover: false })
}
Here is working example.
这是工作示例。
You can start diving in React with this article: Thinking in React.
你可以通过这篇文章开始深入 React：Thinking in React。
回答by Inkling
One option is just to do it in CSS. It's not quite as flexible, but with markup like:
一种选择是在 CSS 中进行。它不太灵活，但带有如下标记：
<div class="tooltip-on-hover">Hover here</div>
<div class="tooltip">This is the tooltip</div>
You could do:
你可以这样做：
.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 */
}
Example:
例子：
.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>You could also nest the tooltip inside the element so you could use a normal descendant selector like .tooltip-on-hover:hover .tooltip. You could even use a ::beforeor ::afterpseudo-element, there are guides around on how to do this.
您还可以将工具提示嵌套在元素内，这样您就可以使用普通的后代选择器，如.tooltip-on-hover:hover .tooltip. 您甚至可以使用 a::before或::after伪元素，有关于如何执行此操作的指南。
回答by Mahesh Haldar
You can also use React Mapple ToolTipwhich is easy to use and customize and also comes with predefined themes.
您还可以使用React Mapple ToolTip易于使用和自定义的，并且还带有预定义的主题。
Disclaimer: I am the author of this library
免责声明：我是这个库的作者
回答by Sandeep Kumar
You can use react-tooltip package. Super easy to use and handy also.
您可以使用 react-tooltip 包。超级易于使用和方便。
Installation: npm i react-tootip.
安装： npm i react-tootip。
Example: 1. import it :
示例： 1. 导入它：
import ReactTooltip from "react-tooltip"
Include it in your component:
<div className="createContent"> **<ReactTooltip />** <div className="contentPlaceholder">add tool tip to your button/div or any element: data-tip="add tooltip message"
将其包含在您的组件中：
<div className="createContent"> **<ReactTooltip />** <div className="contentPlaceholder">将工具提示添加到您的按钮/div 或任何元素：data-tip="add tooltip message"
<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>
<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>
package url: https://www.npmjs.com/package/react-tooltip
回答by anoNewb
Install npm package:
安装 npm 包：
npm install react-tooltip
Usage:
用法：
import ReactTooltip from "react-tooltip";
<div data-tip="msg to show" data-for='toolTip1' data-place='top'>Tooltip</div>
<ReactTooltip id="toolTip1" />
回答by Gowrishankar R
In case, if you are using react-bootstrap in your project, then use https://react-bootstrap.github.io/components/overlays/Overlay with the tooltip.
如果您在项目中使用 react-bootstrap，请使用https://react-bootstrap.github.io/components/overlays/Overlay 和工具提示。
MouseEnter and MoverLeave need to be used though.
但是需要使用 MouseEnter 和 MoverLeave。
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={renderTooltip}>
<div>on hover here we will show the tooltip</div>
</OverlayTrigger>
