fix: tooltip position for several elements

[theAnuragMishra]

Merging this pr will shift the position of the tooltips for elements with tooltip position set to left to bottom.
For various elements, the data-position attribute is set to left. This makes the tooltips for these elements appear on the left, hiding other elements. I set the attribute to bottom instead for all these. Obviously the behaviour now hides the bottom elements, but I think (and welcome suggestions on this) that covering the non-related elements provides a better ux than covering the "sibling" or the related elements.

Fixes #4809

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[walterbender]

The reason some of the tooltips are on the left is because those menu items have pull downs or confirmations that appear below. For example, New Project. Not sure I agree with these changes.

[theAnuragMishra]

Ah I see!
I checked for the existence of pull downs that could be obstructed by the tooltip appearing below. But I found none at that time, because I didn't click on the buttons.
Now, yes the tooltip position, if set to below on some of these, will cover the pull downs.
But I think a better solution would be to hide the tooltip on clicking, because they should show as long as the element is hovered (which I think ends when it is clicked, at least behaviorally if not technically.
So should I adjust the tooltip behavior to hide when the element is clicked and update the pr?

[walterbender]

Sure. Hiding them on click would be a better solution.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[walterbender]

You are still planning to hide the tooltips on click?

[theAnuragMishra]

Yess. Sorry if the activity due to syncing my fork caught your attention unnecessarily.
Actually I was looking for a way to hide the tooltip but it's taking some time as I'm not very familiar with materalize css. Could you give me a lead on this?

[walterbender]

I think it is going to have to be something that gets triggered in js/toolbar.js

[theAnuragMishra]

I tried adding an event listener to each of the nav elements that closes the tooltip on click. That doesn't work tho. I mean even a console.log isn't triggered. Something to do with jquery maybe? I do not have a good understanding of how jquery works.

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

SaveInterface.test.js

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

SaveInterface.test.js

[theAnuragMishra]

@walterbender sorry for the delay. i hv added a snippet that handles closing the tooltips when the elements are clicked. Also checked in the browser and i find the behavior to be fine.

Edit: Last time I tried I was adding the event listeners outside of the Toolbar init function so obviously it wouldn't work and I gave up thinking my jquery and materialize skills are not good enough to solve this :)

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

SaveInterface.test.js