Tooltip descriptions not showing springboot/reactJS/material-UI

Viewed 61

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>
    )
1 Answers

You need to remove the exclamation mark after sourceDescription

<Tooltip title={sourceDescription!}> 

to

<Tooltip title={sourceDescription}> 
Related