Add tooltip to top controls, pointer cursor when hoving over controls…

[JBLorincz]

…, color change on hover.

I made a change so that when you hover over a control at the top, itll say what the button does and change its color with a little animation, like so:

I chose this color because it looks fine in both light and dark mode, feel free to change it. Also applies to the bottom right controls:

[netlify[bot]]

✅ Deploy Preview for ytify ready!

Name	Link
🔨 Latest commit	3fb2eab0b3975a25f88535fea25f176d910ce2b8
🔍 Latest deploy log	https://app.netlify.com/sites/ytify/deploys/64bc15dd2d72f50008921cd2
😎 Deploy Preview	https://deploy-preview-119--ytify.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[JBLorincz]

Checking how it looks on mobile with the deploy preview im going to make the "tooltip" not intersect with the top of some menus (probably just not show the tooltip on mobile for now)

[JBLorincz]

@n-ce

[n-ce]

I'm looking into it. So I noticed.

• SkipNext Button is now not hidden by default.
• It's not possible to get rid of tooltip once clicked on an nav item.
• Related Streams tooltip is having bigger font size.
• Too much code for such a usecase.

I think we should change the way we approach this issue and we should start with taking some UI inspirations before heading forward. In a way this issue is connected to two of my future plans :

• Material Colors (which would have decided the hover color)
• Navigation Menu Overhaul (responsive like twitter)