short and full names, hints

app.py

@@ -2,16 +2,19 @@ import streamlit as st
 
 ss = st.session_state
 
-GC_NAMES = ['Hydrogen sulphide',
-            'Carbone dioxide', 'Nitrogen', 'Methane', 'Ethane', 'Propane', 'N-butane', 'Iso-butane', 'N-pentane',
-            'Iso-pentane', 'N-hexane',
-            'N-heptane', 'C7+', 'Hydrogen', 'Air', 'Water', 'Oxygen']
+gc_formula_k = "short"
+gc_full_key = "full name"
+GC_FULL_NAMES = ['Hydrogen sulphide',
+                 'Carbone dioxide', 'Nitrogen', 'Methane', 'Ethane', 'Propane', 'N-butane', 'Iso-butane', 'N-pentane',
+                 'Iso-pentane', 'N-hexane',
+                 'N-heptane', 'C7+', 'Hydrogen', 'Air', 'Water', 'Oxygen']
+GC_SHORT_NAMES = ['H2S', 'CO2', 'N2', "C1", "C2", "C3", "nC4", "iC4", "nC5", "iC5", "C6",
+                  "C7", "C7+", "H2", "Air", "H2O", "O2"]
+
+GC_NAMES = []
+for full_name, short_name in zip(GC_FULL_NAMES, GC_SHORT_NAMES):
+    GC_NAMES.append({gc_full_key: full_name, gc_formula_k: short_name})
 
-center_html = """
-<div style='display: flex; flex-direction: column; justify-content: center;; height: 38px;'>
-    <span style='text-align: center; word-wrap: break-word;'>{}</span>
-</div>
-"""
 
 sg_k = 'sg_value'
 pc_k = 'p_crit_value'
@@ -45,6 +48,51 @@ if sg_source == UD:
 else:
     st.text_input("sg", value=ss[sg_k], key="input_field", disabled=True, help="Calculated")
 
+
+def text_for_gc(col, gc):
+    # Generate unique class names for each image
+    hover_class = f'hoverable_{i}'
+    tooltip_class = f'tooltip_{i}'
+
+    # Define the unique CSS for each image
+    hover_css = f'''
+        .{hover_class} {{
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            height: 38px;
+        }}
+        .{hover_class} .{tooltip_class} {{
+            visibility: hidden;
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            transition: opacity 0.5s;
+            background-color: rgba(0, 0, 0, 0.8);
+            color: #fff;
+            padding: 4px;
+            border-radius: 4px;
+            text-align: center;
+            white-space: nowrap;
+        }}
+        .{hover_class}:hover .{tooltip_class} {{
+            visibility: visible;
+        }}
+    '''
+    tooltip_css = f"<style>{hover_css}</style>"
+
+    # Define the html for each image
+    text_div = f'''
+            <div class="{hover_class}">
+                <span style='text-align: center; word-wrap: break-word;'>{gc[gc_formula_k]}</span>
+                <div class="{tooltip_class}">{gc[gc_full_key]}</div>
+            </div>
+        '''
+    with col:
+        st.markdown(f'{text_div}{tooltip_css}', unsafe_allow_html=True)
+
+
 params = []
 ss[gc_state_k] = UD
 if sg_source != SG_GC:
@@ -59,8 +107,9 @@ with st.expander("Gas components") as gc_exp:
             if j >= len(cur_gc):
                 break
             gc11, gc12 = col.columns([1, 1.5])
-            gc11.markdown(center_html.format(cur_gc[j]), unsafe_allow_html=True)
-            params.append(gc12.text_input(cur_gc[j], value=0, label_visibility='collapsed'))
+            text_for_gc(gc11, cur_gc[j])
+            params.append(gc12.text_input(cur_gc[j][gc_formula_k], value=0, label_visibility='collapsed',
+                                          help=cur_gc[j][gc_formula_k]))
             j += 1