accessibility tooltip

[hcvcastro]

• browser: tooltip: add util function
• browser: tooltip: add Control.Tooltip.js file
• browser: tooltip: attach listener to buttons

[eszkadev]

I think we already have at least 2 implementations of tooltips. Why this one is special? Cannot be other one reused?

Our goal is to unify things and reduce duplicated implementations. Best would be to reuse native browser tooltip (https://www.w3schools.com/jsref/prop_html_title.asp) or use jQuery one (elem.tooltip()) which is used in many places. Later we need to convert all of them into single type.

This reduces effort needed for maintaining the app in a long run.

[hcvcastro]

I think we already have at least 2 implementations of tooltips. Why this one is special? Cannot be other one reused?

I did not find implementations, or perhaps I missed, where are those implementations?

Our goal is to unify things and reduce duplicated implementations. Best would be to reuse native browser tooltip (https://www.w3schools.com/jsref/prop_html_title.asp) or use jQuery one (elem.tooltip()) which is used in many places. Later we need to convert all of them into single type.

If those exist, it does not resolve accessibility issues, they disappear when mouse out.

This reduces effort needed for maintaining the app in a long run.

I agree

[pedropintosilva]

Thanks @hcvcastro !

Some tooltips are not readable (are cropped):

NotebookbarBuilder is still using the other tooltips:

Additionally, sometimes the tooltip stays visible even when I interacting with the document. This can be very confusing for the user (The user triggers a tooltip by just moving the mouse from the UI to the document and doesn't notice that something appear and stayed there; Then looks again and sees a "Button" there (which is actually the tooltip)

https://github.com/CollaboraOnline/online/assets/65948705/088172bd-6509-407d-b3c8-7b8d4c913792

(all screenshots and record done in Firefox)

[hcvcastro]

Some tooltips are not readable (are cropped):

@eszkadev, @pedropintosilva Thanks, but I am not a Graphical Design expert, I did what I can play with those colors and fonts. My job is done, @pedropintosilva I will ask you to beautify the tooltips in your commits.

[hcvcastro]

NotebookbarBuilder is still using the other tooltips:

Unfortunately it is out of the scope of my task. Please file the new issue ticket

[hcvcastro]

Additionally, sometimes the tooltip stays visible even when I interacting with the document.

Firefox, of course, Ok, I will test it and see what I can do. Thanks

[bayramcicek]

Styling

• changed text color, bg color, padding
• added box-shadow
• didn't touch the font

Before	After

Cropping/overflow issue

• add 8 different position for tooltips
  • bottom-right, bottom-left, top-right, top-left and their left/right aligned versions
  • pick one of them which is visible and is not overflow from the window
  • tooltips at the bottom and left/right aligned ones take precedence

Before	After

Tooltip stays visible if the cursor moves very fast over the elements/icons

Additionally, sometimes the tooltip stays visible even when I interacting with the document.

this._options = L.extend({ timeout: 150 }, options);

• I see that when mouse moves very fast over an icon/button; it is so fast that this move happens under 150 ms, Therefore, after mouse left the icon, show() function still waits to be executed after 150 ms; then it shows the tooltip even if the cursor is not over the icon. So, most likely there are some issues on the mouseEnter & leave functions about the timeout and I see that mouseLeaveFunction does not prevent show(elem) function from running, we need to prevent that.

mouseEnterFunction-->
beginShow-->>
---mouseLeaveFunction
<<--beginHide
show-->               <---- this should not run (we need to stop timeout somewhere and prevent this show function from running)

Now: working on this issue...

[hcvcastro]

bayramcicek Thanks for the improvements, nice looking tooltip =)

[bayramcicek]

Styling

• changed text color, bg color, padding
• added box-shadow
• didn't touch the font

Before	After

Cropping/overflow issue

• add 8 different position for tooltips
  • bottom-right, bottom-left, top-right, top-left and their left/right aligned versions
  • pick one of them which is visible and is not overflow from the window
  • tooltips at the bottom and left/right aligned ones take precedence

Before	After

Tooltip stays visible if the cursor moves very fast over the elements/icons

Additionally, sometimes the tooltip stays visible even when I interacting with the document.

this._options = L.extend({ timeout: 150 }, options);

• I see that when mouse moves very fast over an icon/button; it is so fast that this move happens under 150 ms, Therefore, after mouse left the icon, show() function still waits to be executed after 150 ms; then it shows the tooltip even if the cursor is not over the icon. So, most likely there are some issues on the mouseEnter & leave functions about the timeout and I see that mouseLeaveFunction does not prevent show(elem) function from running, we need to prevent that.

mouseEnterFunction-->
beginShow-->>
---mouseLeaveFunction
<<--beginHide
show-->               <---- this should not run (we need to stop timeout somewhere and prevent this show function from running)

Now: working on this issue...

Fix: Tooltip stays visible if the cursor moves very fast over the elements/icons

• cancel "_showTimeout" before it triggers show() - if beginHide() is called

Before:

https://github.com/user-attachments/assets/a1236983-1241-4eb5-8445-5afcc6e22745

After:

https://github.com/user-attachments/assets/bf8491b1-17fd-4345-a574-f2d3bd10c355

Ready for review. Thanks!