[Solved] Tooltip not working for me

[SoH]

01.

<Tooltip openDelay={100} position="right" anchorElement="element">

02.<Grid

03.    data={process(this.state.managers.map((manager) => ({...manager, selected: manager["mail"] == this.state.selectedID})  ), this.state.gridDataState)}

04.    {...this.state.gridDataState}

05.    onDataStateChange={this.handleGridDataStateChange}

06.    style={{ height: "300px" }}

07.    pageable={true}

08.    sortable={true}

09.    selectedField="selected"

10.    onRowClick={(e) => {

11.       this.setState({ selectedID: e.dataItem.mail });

12.       this.props.callback(e.dataItem.mail);

13.    }}

14.>

15. 

16.  <Column field="mail" title="email" filter={'text'} headerCell={MailHeader} columnMenu={ColumnMenu} headerClassName="k-header-filtered" />

17.  <Column field="givenName" title=”first name” filter={'text'} columnMenu={ColumnMenu} headerClassName="k-header-filtered" />

18.  <Column field="sn" title=”last name” filter={'text'} columnMenu={ColumnMenu} headerClassName"k-header-filtered”/>

19.  <Column field="managerOf" title=”manager of” filter={'text'} columnMenu={ColumnMenu} headerClassName="k-header-filtered" />

20. 

21.</Grid>

22.</Tooltip>

 

The above is how I have implemented my Grid with tooltips. My MailHeader component looks like:

1.class MailHeader extends React.Component<Readonly<MailHeaderProps>, {}> {
2.    render() {
3.        return (
4.            <span title={this.props.title}>{this.props.title}</span>
5.        );
6.    }
7.}

 

But I get this error:

TS2326: Types of property 'headerCell' are incompatible.
  Type 'typeof MailHeader' is not assignable to type 'ComponentType<GridHeaderCellProps>'.
    Type 'typeof MailHeader' is not assignable to type 'StatelessComponent<GridHeaderCellProps>'.
      Type 'typeof MailHeader' provides no match for the signature '(props: GridHeaderCellProps & { children?: ReactNode; }, context?: any):ReactElement<any>'.

 

Can anyone point me in the right direction to an answer or a possible clue? 

[Stefan]

Hello,

Thank you for the code.

The error is a TypeScript one and it is connected to the type of props passes to the MailHeader component. This component should have props of type GridHeaderCellProps:

class MailHeader extends React.Component<Readonly<GridHeaderCellProps>, {}> {

Please give this a try and let me know if the error still occurs.

 

Regards,
Stefan
Progress Telerik