use react-jsonschema-form field events

Question

I have a simple schema to generate form.I want to do some actions on the fields when mouse over occur. but I don't know how can I add mouse over to all fields. By reading the Documents I found that there are some events for form fields. - Form field blur events - Form field focus events There isn't any example for them although. Please help me to understand where can I set the mouse over event? This is my schema:

 "schema":
         {
            "type":"object",
            "properties":{
                "request": {
                    "type": "object",
                    "properties": {
                        "requester": {
                            "type": "string"
                        },
                        "requestDate": {
                            "type": "integer"
                        },
                        "detailList": {
                            "type": "array",
                            "items": {
                                "id": "urn:jsonschema:com:fanap:demo:entity:ItemRequestDetail",
                                "type": "object",
                                "properties": {
                                    "item": {
                                        "id": "urn:jsonschema:com:fanap:demo:entity:ItemClass",
                                        "type": "object",
                                        "properties": {
                                            "name": {
                                                "type": "string"
                                            }
                                        }
                                    },
                                    "requestedAmount": {
                                        "type": "number"
                                    }
                                }
                            }
                        },
                        "description": {
                            "type": "string"
                        },
                        "state": {
                            "id": "urn:jsonschema:com:fanap:demo:entity:CategoryElement",
                            "type": "object",
                            "properties": {
                                "name": {
                                    "type": "string"
                                }
                            }
                        },
                    }
                },
                "processResult": {
                    "type": "object",
                    "properties": {
                        "notificationMessage": { "type": "string" }
                    }
                }
            }
         }

and this is my component for showing generated form:

class JsonFormWrapper extends React.Component<PropsT> {
render() {
    return (
        <React.Fragment>
            {this.props.jsonResponse ? (
                <Form
                    schema={this.props.jsonResponse.schema}
                    uiSchema={this.props.jsonResponse.uiSchema}
                />
            ) : null}
        </React.Fragment>
    );
  }
 }
 export default JsonFormWrapper;

how can I set mouse over for all the elements? I really appreciate any help you can provide.

Answer 1

Could be a hacky solution but you can utilize Field Template to define custom events like on mouse over. If that works, you will have to define it once and not repeat it for every input field