Skip to content

Instantly share code, notes, and snippets.

@marketneutral

marketneutral/pandas_tooltips.py

Created April 20, 2023 19:26
Show Gist options
  • Save marketneutral/efd794b90df24906f8ca633d9087f005 to your computer and use it in GitHub Desktop.
Save marketneutral/efd794b90df24906f8ca633d9087f005 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. marketneutral created this gist Apr 20, 2023.
    105 changes: 105 additions & 0 deletions pandas_tooltips.py
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    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