I am trying to have hover information of each user inside of a table. I have tried the getContent method, and it kind of fits our needs, but I'm also trying to use that with a component being rendered itself. I have also tried setting the data-for key to be unique for a user, and changing the ReactTooltip id to match that, but it doesn't seem to want to set this id. I have deleted a few of these iterations, but this is where I'm at right now.
Cell: props => (
<div>
<div data-tip data-for={props.value.id}>
<input
onChange={this.handleSelectingUser}
type="checkbox"
style={{marginRight: 10}}
name={props.value.deviceId || props.value.id} checked={this.state.selectedUsers.indexOf(props.value.deviceId) !== -1 || this.state.selectedUsers.indexOf(props.value.id) !== -1}
/>
<span style={{marginRight: 10}}>
{
(props.value.facebook != "none") ?
<img style={{borderRadius: 2}} src={props.value.facebook} width="25" height="25"/> :
<span style={styles.noFacebook}>
{props.value.firstName.charAt(0).toUpperCase() + props.value.lastName.charAt(0).toUpperCase()}
</span>
}
</span>
<span
className="people-name"
onClick={() => this.props.history.push(`/app/dashboard/customerInfo/${props.value.id}`, {customer: props.value.customer})}
>
{props.value.firstName + " " + props.value.lastName}
</span>
</div>
<ReactTooltip id={props.value.id}>
<div className="popup">
<div style={{borderBottom: '1px solid #e9eef2', padding: 10}}>
<span style={{marginRight: 10}}>
{
(props.value.facebook != "none") ?
<img style={{borderRadius: 2}} src={props.value.facebook} width="60" height="60"/> :
<span style={styles.noFacebookBig}>
{props.value.firstName.charAt(0).toUpperCase() + props.value.lastName.charAt(0).toUpperCase()}
</span>
}
</span>
<span style={{fontWeight: 500, fontSize: 18}}>{props.value.firstName + " " + props.value.lastName}</span>
</div>
<div style={{padding: 10}}>
<Row>
<Col md={4} style={styles.popupHeader}>
Signed Up
</Col>
<Col md={4} style={styles.popupHeader}>
Last Seen
</Col>
<Col md={4} style={styles.popupHeader}>
Mobile Sessions
</Col>
</Row>
<Row>
<Col md={4}>
{props.value.signedUp}
</Col>
<Col md={4}>
{props.value.lastSeen}
</Col>
<Col md={4}>
{props.value.sessions}
</Col>
</Row>
</div>
</div>
</ReactTooltip>
</div>
)
Cell is just a key running this on each user inside of the React Table library and it's placed inside of the render function right now. Any advice or insight would be awesome, thanks!
I am trying to have hover information of each user inside of a table. I have tried the getContent method, and it kind of fits our needs, but I'm also trying to use that with a component being rendered itself. I have also tried setting the data-for key to be unique for a user, and changing the ReactTooltip id to match that, but it doesn't seem to want to set this id. I have deleted a few of these iterations, but this is where I'm at right now.
Cell is just a key running this on each user inside of the React Table library and it's placed inside of the render function right now. Any advice or insight would be awesome, thanks!