使用ReactJS的工具提示div

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

return (
  

    
on hover here we will show the tooltip
    

      
this is the tooltip!!
    
  
);

在哪里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

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

return (
  

    
on hover here we will show the tooltip
    

      
this is the tooltip!!
    
  
);

在哪里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

一种选择就是在CSS中完成.它不是那么灵活,但标记如下:

Hover here
This is the tooltip

你可以这样做:

.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; }

Hover here
This is the tooltip