pandas_tooltips.py

def make_tooltipped_df(df, tooltips: dict):
  """
  import pandas as pd
  from IPython.display import display, HTML

  # Sample DataFrame
  data = {'A': [1, 2, 3], 'B': [4, 5, 6], 'C': [7, 8, 9]}
  df = pd.DataFrame(data)

  # Apply styles to the DataFrame
  styled_df = df.style.set_table_styles([
      {"selector": "th", "props": [("background-color", "lightblue")]},
      {"selector": "td", "props": [("text-align", "center")]}
  ])

  # Define tooltips for each column
  tooltips = {
      'A': 'This is a very long tooltip text for column A that should wrap after a certain width.',
      'B': 'This is column B.',
      'C': 'This is column C.'
  }

  # Display the HTML template in a Jupyter Notebook output cell
  html_template = make_tooltipped_df(styled_df, tooltips)
  display(HTML(html_template))

  """

    html_table = styled_df.render()
    # Create an HTML template with custom CSS and JavaScript for tooltips
    html_template = f'''
    <style>
        .custom-tooltip {{
            position: absolute;
            z-index: 9999;
            display: none;
            background-color: #212529;
            color: white;
            padding: 5px;
            border-radius: 3px;
            font-size: 10px;
            max-width: 150px;
            word-wrap: break-word;
            text-align: center;
        }}
        .custom-tooltip::after {{
            content: '';
            position: absolute;
            top: -5px;
            left: calc(50% - 5px);
            border-width: 0 5px 5px;
            border-style: solid;
            border-color: transparent transparent #212529 transparent;
        }}
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <div class="container">
        {html_table}
    </div>
    <script>
        const tooltips = {tooltips};

        function showTooltip(e, tooltipText, columnNameElement) {{
            const tooltip = $('<div class="custom-tooltip"></div>');
            tooltip.text(tooltipText);
            $('body').append(tooltip);

            const elementOffset = columnNameElement.offset();
            const left = elementOffset.left + columnNameElement.outerWidth() / 2 - tooltip.outerWidth() / 2;
            const top = elementOffset.top + columnNameElement.outerHeight() + 5;

            tooltip.css({{
                left: left,
                top: top
            }});

            tooltip.show();
        }}

        function hideTooltip() {{
            $('.custom-tooltip').remove();
        }}

        $(document).ready(function() {{
            $('th').each(function() {{
                const columnNameElement = $(this);
                const columnName = columnNameElement.text();
                if (tooltips[columnName]) {{
                    columnNameElement.on('mouseenter', function(e) {{
                        showTooltip(e, tooltips[columnName], columnNameElement);
                    }});
                    columnNameElement.on('mouseleave', function() {{
                        hideTooltip();
                    }});
                }}
            }});
        }});
    </script>
    '''
    return html_template