Flyo Data Storage Component | Bonus: small animation at load time.

@Ayoub1dev adding a title attribute to the button isn't mandatory and in fact is a bad practice against having a good a11y. Not just a11y, is a bad experience for the user itself to have an unstyled tooltip there poping up on the page.

You would want to add a tooltip when the button itself doesn't express enough meaning of what it is supposed to do. A "folder", "new file" and "upload" icons are so used in the web that adding extra information about them is not neccesary.

But the main concern regarding a title attribute is that you lose control of how to style it as it will delegate this task to the browser (which is also inconsistent among the plethora of browsers available).

Check this article for more information about it. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

BTW, I have used Tailwind.

@denik1981 Thanks! Learning new things.

I have another question if you don't mind, can a tooltip be styled or we have to create it from scratch using html and css?

@Ayoub1dev If you have finally decided that you need a tooltip, then by no doubt, having control of the style will be a better choice for you. If you think about it, the first thing a designer does is to reset (or normalize) the browser styles because they want to have full control of how the page looks.

With a browser tooltip you cannot control when it shows up, "if it shows up", where it shows up, and how it looks. You want a tooltip that can integrate with the theme of your layout and you want to be careful of where you place it to avoid hiding important information. Also you want to be sure that for your mobile/tablet users the tooltip is not popping up as well.

If you depend on the browser but you have decided that you are comfortable with it, then the question you should ask yourself is which browser?, cause there are tons of them out here and you will be never certain of how your tooltip looks in the browser your user is using. So, yes, we are happy to have some styles by default just in case we forgot to style them at our page but in general the less you depend on the user-agent styles, the better.

Actually, this challenge is a good example because it requires a tooltip that nicely integrates with the theme of the component. Using its hue, font, size, placement, things that the you cannot do with the default styles provided by the browser.

@denik1981 Thanks 😊 again!!

Just curious, you have lots of experience so you either have CS degree or more than 1 year working experience, isn't it?