Really Useful Javascript

The x_tip function can be used to write a text tip to an element using innerHTML. <script>x_tip(text,tip,'',element)</script>.
Just pass the text and the tip you want displayed when a user hovers over the word and the x_tip function will do the rest.
x_tip function writes the following span: <span title="tip" alt="tip" style="x_tip_style">text</span>; which works like this: .
You can only pass plain text, not HTML text in the tip. HTML doesn&';t allow that. Well, you can pass HTML text, but it won&';t be interpreted as HTML. The tip will just be plain text of the HTML.
Set x_tip_style before calling the function to whatever style you want to let your users know they can hover over this text to get a tip. Or don&';t set it and let the user be surprised when they get the tip.

I&';ve included all the country and state names &n-; just pass the 2 character code as the text and x_tip_country or x_tip_state as the tip and the tip will be the country or state name. <script>x_tip('WA','x_tip_state','','element')</script> yields <script>x_tip('US','x_tip_country','','element')</script> yields .
States can be US, CA, MX, or GB. I included these four since Google Noto Emoji provided the flags for them.
I couldn&';t find any two character codes for UK provinces, so abbreviated to first two characters. Saint Helena, Ascension, and Tristan de Cunha are all part of the same British Territory (Saint Helena, Ascension, and Tristan de Cunha). But they each have different country codes (there is no single country code for the combined territory). So I left them separate.
There is no overlap in two character codes for US states and territories and Canadian provinces and territories. But adding in Mexican states caused overlap; as did British Territories. So for US states and territories and for Canadian provinces and territories, just pass the state code. For Mexico and UK, prefix the state code with the country code (US, CA, MX, GB) followed by a hyphen(-). The Mexican state codes can be found here. (I provided the link since the two character versions are harder to find.
Because including all the country and state names took a little bit of room, I kept this information and the x_tip function in a separate javascript file - x_press_tip.js. You&';ll need to include that in your HTML if you want to use x_tip. <script src="https://stubbart.com/code/x_press_tip.js"></script><script>x_tip_init()</script>.

The tip can be the 3 character Country code if you like: x_tip=x_tip_country_iso3 .
Perhaps more useful, the tip can be the population or area: x_tip=x_tip_pop, x_tip_area, x_tip_area_km or for states x_tip_st_pop, x_tip_st_area, x_tip_st_area_km. x_tip_area is in sq mi. x_tip_area_km is in sq km. The tip can be the density: x_tip_dens, x_tip_dens_km, x_tip_st_dens, x_tip_st_dens_km. pop area area_km dens dens_km
For countries, the tip can be the currency or language: x_curr, x_lang. curr lang

It&';s better to just pass your own value for the tip for population, area, density, currency, and language as those may change and I&';m not going to keep that close track of things unless I need them. You&';re welcome to copy the code and change the values you need and keep them up-to-date. You can also use it as a template to design your own text tip arrays. Currency and language are less likely to change, but the official language of South Sudan has changed twice since 2005. Some countries such as Bolivia have several official languages &n-; I chose to only list those spoken by the most people.

Now, back to the 3 character country code. That&';s not very useful as a tip. It would be more useful if you could pass the 2 character code, display the 3 character code, have the tip be the country name. Well, you can. But first, let me use population as an example of how you&';d do this.
<script>x_tip('US','x_tip_pop','','element')</script> yields .
<script>x_tip('US','x_tip_pop','US population','','element')</script> yields .

Now for the 3 character code. <script>x_tip('US','x_tip_country','x_country_iso3','element')</script> yields .
<script>x_tip('US','x_tip_country_iso2','x_country')</script> yields .

You can only pass an x_tip_... value for the display text when the tip is x_tip_country_iso2, x_tip_country_iso3, x_tip_country, x_tip_curr, x_tip_lang, x_tip_st_iso2, x_tip_state. The x_tip_... which you can pass for the display text are x_tip_country_iso3, x_tip_country, x_tip_curr, x_tip_lang, x_tip_flag, x_tip_flag_img, x_tip_state, and x_tip_st_flag_img.

The display text can be flags x_tip_flag, x_tip_flag_img, x_tip_flag_emoji, x_tip_st_flag_img. To use the emoji / unicode flag as your tip, pass x_tip_flag as the display text. As late as , Windows displays the two character country code rather than the actual flag. So, if the user&';s platform is Windows, x_tip displays the flag image instead. . If you want to always display the flag emoji/unicode regardless of platform, use x_tip_flag_emoji rather than x_flag. . x_flag_emoji will not display the flag when using Windows.
If you want to use the flag image, you can use the ones I&';ve provided from Google Noto Emoji. Or you can download them from GoSquared or wherever, making sure the license allows you to do what you&';d like to do with them. Or you can create your own. Then set x_tip_flag_img_style for the image. Set x_tip_flag_path including the trailing / to where the flag images are located. Set x_tip_flag_ext to the extension of the flag image (usually .png or .svg). If you want to use the provided flags, set x_tip_flag_ext=x_tip_countries_flag_ext or x_tip_flag_ext=x_tip_states_flag_ext.
Your path might be flags/flags-iso/shiny/32/. Your extension might be .png. The image file name would be flags/flags-iso/shiny/32/US.png for the US flag. Or your path might be xyz/ISO-. Your extension might be -flag.png. The image file name would be xyz/ISO-US-flag.png .

To display an audio control pass something like <audio controls><source src="horse.mp3" type="audio/mpeg"></audio> for the display text.

Similar to countries and states, you can set up your own nested array and x_tip will use it; but only one nested array &n-; x_tip_array.
Load x_tip_array before calling x_tip. Example:
x_tip_array=[['banana','🍌','yellow',105],['apple','🍎','red,green,yellow',95],['pear','🍐','yellowgreen',102]];
Now call x_tip. <script>x_tip('apple','x_tip_array_02','x_tip_array_01')</script> yields
x_tip_array_00 is interpreted as x_tip_array[i][0]. x_tip_array_01 is interpreted as x_tip_array[i][1]. Etc. where i is the index where x_tip_text is found. 1 in this case for x_tip_text='apple'.