First-contributions: Hover text for flags on README page

[als1]

🐞 Problem

The flags on the README page are kind of small and some of them are fairly similar so it's hard to distinguish them. It would be nice to have a tooltip when you hover over a flag so you know if you are on the country/language you are looking for.

🎯 Goal

It would be easier to find the actual language you are looking for in the list of flags.

💡 Possible solutions

You could add hover text to each flag, which indicates the language or country (see in translations/Translations.md). I will post a pull request for this.

Steps to solve this issue

Submit a pull request by adding alt and title attribute to images of flags in Readme.md and Translations.md. Value of the attributes should be the language name in the same language

For example, change

<img src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/in.svg" width="22">

to

<img title="हिन्दी" alt="हिन्दी" src="https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/in.svg" width="22">

[als1]

Pull request #26284 added. Please review and merge.

[jishu-yadav]

Hi!! I am very new to open source contributions ...so can anyone plz help and suggest how to proceed.

[YashvirSinghNathawat]

Hey i am working on this issue..
I have one problem like some translations have no flags like Gujarati,Marathi and Hindi,etc all this are in India.
My suggestion:- A small icon with intials like GJ for Gujrati on a orange or any colour background.
Waiting for your decision

[Roshanjossey]

One decision we took for countries that have multiple official languages is to add a link from the flag to Translations.md. From there, users could read the name of the language in the same language and navigate there. So, the title text for the flag could just be a list of all these translations we have.

[Roshanjossey]

We've made some significant improvements in how we display flags for translation now. I think this is a good time to work on this issue and improve it further. I'll update the issue description with more details.

[garvitgupta13]

@Roshanjossey can I work on this issue

[Roshanjossey]

@garvitgupta13, sure go ahead

[TomerPacific]

@Roshanjossey , do you need help with this issue?

[2tanayk]

@Roshanjossey can I work on this issue?

[Kerveyfelix]

@Roshanjossey Can I work on this issue?

[Roshanjossey]

Updates on this issue:

We have two pull requests to address this issue now.
https://github.com/firstcontributions/first-contributions/pull/31427
https://github.com/firstcontributions/first-contributions/pull/31648

There are some changes required in these pull requests, so, I'll add a review to them.
@TomerPacific, @2tanayk, @Kerveyfelix, it would also be good if you can also take a look at the changes.

[2tanayk]

@Roshanjossey yes having a look at this issue and changes reqd. ,do you need any help from me with this issue?

[Roshanjossey]

Fixed with #31648 and #31427. Closing.

@2tanayk, this issue is fixed. Please look at other issues and see if you're interested to work on them.