function Tooltip(props) {
if (props.isVisible) {
return
{props.textContent}
;
}
return {props.textContent}
;
}
class TooltipApp extends React.Component {
constructor(props) {
super(props);
this.state = {
isShowTooltip: false,
tooltipContent: "",
tooltipStyle: {}
};
this.ShowTooltip = this.ShowTooltip.bind(this);
this.HideTooltip = this.HideTooltip.bind(this);
}
ShowTooltip(event) {
var elm = event.target;
var tTop = (elm.offsetTop + elm.offsetHeight + 5) + 'px';
var tLeft = elm.offsetLeft + 'px';
this.setState({
isShowTooltip: true,
tooltipContent: event.target.dataset.descr,
tooltipStyle: {
top: tTop,
left: tLeft
}
});
}
HideTooltip() {
this.setState({isShowTooltip: false});
}
render() {
return (
This is a example of{" "}
tooltip via{" "}
React
);
}
}
ReactDOM.render(
,
document.getElementById('root')
);