Display html content when hovering over a button

Using Streamlit
1

Hi all, I have this flowchart I want to display when I hover over a button. But experimenting with everything the closest I get is using iframe’s. But when hovering over the button I am getting a blank page. Give below is my code.

def create_graph(topic, submodules, filename, graph_width="800px", graph_height="600px"):
    """Generate the dynamic graph for the current topic with adjustable dimensions."""
    net = Network(height=graph_height, width=graph_width, bgcolor="#222222", font_color="white", directed=True)
    net.add_node(topic, label=topic, shape="circle", color="orange")
    previous_node = topic
    for submodule, description in submodules:
        net.add_node(submodule, label=submodule, shape="box", color="lightblue")
        net.add_edge(previous_node, submodule)
        previous_node = submodule
    
    output_dir = "graphs"  # Directory to save the graph
    os.makedirs(output_dir, exist_ok=True)  # Create directory if it doesn't exist
    filepath = os.path.join(output_dir, filename)

    net.save_graph(filepath)
    return filepath

graph_file_path = create_graph(current_topic, submodules, f"{current_topic}_roadmap.html", graph_width="500px", graph_height="300px")
        

        # CSS for hover roadmap
        st.markdown("""
        <style>
            .roadmap-container {
                position: relative;
                display: inline-block;
                float: right;
            }

            .roadmap-button {
                background-color: #4CAF50;
                color: white;
                padding: 10px 20px;
                font-size: 16px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
            }

            .roadmap-button:hover {
                background-color: #45a049;
            }

            .roadmap-content {
                display: none;
                position: absolute;
                right: 0;
                top: 100%;
                background-color: white;
                color: black;
                border: 1px solid #ddd;
                box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
                padding: 10px;
                z-index: 1;
                width: 800px; /* Match graph width */
                height: 600px; /* Match graph height */
            }

            .roadmap-container:hover .roadmap-content {
                display: block;
            }

            iframe {
                width: 100%;
                height: 100%;
                border: none;
            }
        </style>
    """, unsafe_allow_html=True)

        # Show Roadmap Button
        with open(graph_file_path, "r", encoding="utf-8") as f:
            graph_html = f.read()

        st.markdown(f"""
        <div class="roadmap-container">
            <button class="roadmap-button">Show Roadmap</button>
            <div class="roadmap-content">
                <iframe src="{graph_file_path}" frameborder="0"></iframe>
            </div>
        </div>
        """, unsafe_allow_html=True)