Instructor's Student Records Page: Tooltips for comments

[weiquu]

Mousing over the tooltips for instructor comments causes the text to go into the next line, which can be jarring for the user. Here is the normal view:

Here is the view when a user mouses over the first tooltip:

And here is the view when a user mouses over the second tooltip:

Notice how the words/image move to the next line.

While addressing this issue, do also try to address the following:

• The visibility eye icon should have dotted lines under it as well, to indicate that users can mouse over for more information. Not sure if the icon itself is clear enough to indicate that the info is about visibility - feel free to suggest alternatives
• When a comment has been edited, the screen reader reads the first line ("Instructor commented at 16 Dec 4:37pm") twice. Not sure what is causing it, possibly some wrapping of the elements. Do take a look into this as well, but we can shift to another issue if needed

[github-actions]

Good First Issue - Notes for Contributors
This issue is for first-time contributors only. If you are new to TEAMMATES, feel free to submit a PR for this issue.

Please note that we allow only one good first issue per contributor. If you have already made a prior contribution to TEAMMATES, you may wish to take a look at issues with the help wanted tag instead.

We do not assign issues to contributors. If you would like to pick up this issue, do post a comment below to express your interest and check if there is anyone else who is already working on the issue. We will do our best to reply and give you the go-ahead, but if we don't, feel free to submit a PR as long as there is no one else working on it.

To get started, do read through our contributing guidelines carefully, and set up a development environment on your local machine before making a PR.

If you need any clarifications on our developer guide, or are facing issues that are not found in our troubleshooting guide, please post a message in our discussion forum.