I am trying to make a tooltip onhover to display when I hover over an icon(infoIcon). The tooltip is dynamic which means that each datasource will have a different tooltip when you hover over the icon. I have the backend already set up with the json objects and I see the Json descriptions (after running the backend server) on the front end when I inspect the datasources in the networks tab. So the JSON data is coming over which is what I want however the tool tip does not show the descriptions I setup in the Json objects. below is what I have as a JSON object example and what I have as by tooltip code in typescript. Below is the inspect on the datasources on the network tab that proves the sourceDescriptions are read in from the backend. Thanks for the help!
group: "NETWORKS"
index: "networks_home"
isPsr: true
name: "2.4ghzLAN"
sourceDescription: I do not like them, Sam-I-Am"
Here is my tooltip code:
checked: boolean
value: string
label: string
onChange: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void
onlySelectHandler: (s: string) => void
showZeroCounts?: boolean
count: number
disabled?: boolean
indeterminate?: boolean
sourceDescription?: string
}
const FilterCheckbox: React.FC<FilterCheckbox> = props => {
const {
checked,
value,
onChange,
label,
count,
showZeroCounts,
children,
disabled,
indeterminate,
sourceDescription,
} = props
fullLabel = (
<Grid container={true} wrap={'nowrap'} className={classes.labelWrapper}>
<Grid item={true} xs={_.toNumber(fontSize) >= 22 ? 11 : false} className={classes.flex}>
<Tooltip title={sourceDescription!}>
<InfoIcon>
</InfoIcon>
</Tooltip>
<Tooltip title={_.toNumber(fontSize) >= 22 ? label : ''}>
<Typography noWrap={true}>{`${label}`}</Typography>
</Tooltip>
<Grid item={true} className={classes.flex}>
{children} <OnlySelectHandler {...props} />
</Grid>
</Grid>
</Grid>
)