Hi @AdityaDubey0 Are you still workiing on this issue ?
Can you please give update ?
thanks!

Hello @seanlip @SubhashThenua !
I have been working on this issue, and would like to propose a solution. In the input-response-pair.component, I changed the code where the pop-up is being called. Below is proof of this correction.

In addition to this, the graph SVG is not appearing at all (print from production environment). I would like to suggest that a new issue is openned, in order to solve this problem, since this one only refers to the misplaced tooltip.

Thanks @ana-mc-almeida! I think we need to know more about what code you changed and what was causing the original bug.

Thanks also for noticing that the tooltip image is not showing up. I think this needs to be fixed as part of this, actually, since there's not much point making the tooltip fix without it. Could you please look into it too? I will update the issue title.

Thanks!

Hello @seanlip, I managed to find out why the image wasn't showing up (and fix it).

Here's an image with the final result of my changes:

Regarding the code changes I had to make, they were as follows:

• Positioning the tooltip correctly:

  • Moved the popup call inside the oppia-interaction-display component (previously it was in the parent div):
    
  • To fix the popup at the top of the message, it was necessary to remove the overflow property and replace it with margin-top:
    

• Making the image appear:

  • Instead of calling a rich text component, I believe the oppia-interaction-display component should be called, and for that, I needed to call the detectChanges() method in the ngAfterViewInit lifecycle hook:
    
    
  • However, the image was poorly positioned inside the popup, so I made the following style changes in the graph-input-response.component:
    
  • After these changes, I also suggest increasing the value of GRAPH_INPUT_LEFT_MARGIN (from 120 to 200, for example) to reduce the white space, as demonstrated in the following image:
    

These were all the changes I made to the code to fix this issue. Let me know if I can help with anything else!

Great, thanks @ana-mc-almeida, I'll assign you! When can you create a PR?

Also, one note -- when you provide the "proof of changes" video, please verify that the answer display looks fine for all other interaction types as well (drag-and-drop, number, interactive map, etc.) -- I'm not sure which show a tooltip and which don't, but we should make sure that your changes don't break anything since they apply to generalized components. You can load the all_interactions exploration from /admin > Activities in your dev server (I think the exp ID is '16') and play through it, that should cover most of them.

Thanks!

Hi @seanlip, thanks for your help, I will verify the answer display in all the others interactions types.

I intend to create the PR as soon as possible. I'm currently having difficulties creating a test that verifies that the graph image is being displayed in the popup, but once it's done I'll create the PR.