Hover over cell

[nojaf]

📝 Summary

Similar to #4245, we would also like to have a function to provide a callback that can create hover text for the individual cells.

🔍 Description of Changes

This is another TanStack table plugin.
Needs some more polishing but you like to get a sense first if this would be accepted.

📋 Checklist

• I have read the contributor guidelines.
• For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• I have added tests for the changes made.
• I have run the code and verified that it works as expected.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
marimo-docs	Ready	Preview	Comment	Sep 22, 2025 11:13am

[mscolnick]

@nojaf what is the use case? would it make sense to instead create a hover_template which is a templated string and we can do this on the frontend instead.

something like what plotly does https://plotly.com/python/hover-text-and-formatting/#customizing-hover-text-with-a-hovertemplate

[nojaf]

Hi, I asked inside and they mentioned two direct use cases:

• A hover-over header to explain the metric in more detail
• A hover-over cell to list some metadata

They use this in plotly a lot though usually provide hover_data=[Col1, Col2,..] and plotly does the formatting, probably calling hover_template in the background.

So, this would work for us.
Alas, I don't quite how this would work on a technical level.
Could you describe what needs to be done? Happy to adhere to your suggestion!

[mscolnick]

@nojaf we can add a parameter hover_template, which could be This car has {{num_wheels}} wheels and goes {{top_mph}}, then on the frontend we just do a find/replace:

const variableRegex = /{{(\w+)}}/g;
const matches = [...prompt.matchAll(variableRegex)];
let result;
for (const match in matches) {
   // if match is in the row, replace it in the string
}  

since we pass the full fields anyways, we likely don't need the hover_data args, just hover_template

[nojaf]

Hi @mscolnick, I tried something the way you described it.
Do you envision that each hover_template has access to all the columns of the row?
What if you want to show something specific to the cell? Should we have {{row}}, {{column}} and {{value}} as well? How do you envision this?

[mscolnick]

yea, hover_template would have access to each row. and each {{replace_me} is a column name

[mscolnick]

this replacement can happen on the frontend

[nojaf]

@mscolnick yeah this works.
But I wonder if we want to support showing something specific for each individual cell?

[mscolnick]

that seems like a weird user experience, because how are they going to expect what is in each popover without hovering over it. it would just be a surprise. with a template, they at least can infer what fields are being shown and changing

[nojaf]

Alright, makes sense. I'll stick to the column names within a row for now.