I would like to build a tooltip with an async value (I want to pass the current selection to a backend to execute and display the result in a tooltip). I see that
hoverTooltip will accept a function that returns a promise and that autocomplete sources can be async, but I can’t see any obvious way of making a plain tooltip using
showTooltip be async.
Digging around in the source code for
hoverTooltip I can follow along and generally get the gist of how I could adapt that approach to build my own tooltip.
However, that looks like it will involve a fair bit of code so before I go down that path I just wanted to check if I’m missing an obvious alternative and if mimicking what’s being done for hover tooltips is a reasonable way to go.
You can add the
showTooltip facet dynamically, responding to
StateEffects that are fired from the promises resolving. Here is a quick example that uses three extensions.
A little bit of explaination:
ViewPlugin is the “living” part of the three, it can do things on it’s own and “contain” the async stuff.
StateField is the, well, stateful part of the three: it will respond to the
StateEffect dispatched by the ViewPlugin, and make sure it’s value is always in sync with the text currently on selected.
showTooltip.compute(...) converts the
StateField into a tooltip!
Thank you so much, that is exactly what I was looking for!
This worked perfectly so thank you again for the help. One thing I’m curious about is if there is any difference between using
showTooltip to create a third extension like you have done in your example code and using
provide hook on the state field definition like this example to create an extension.
It seems to work fine, just wondering if there are any subtle differences to watch out for.
provide can be useful if you want to directly expose an extension to users yet make sure that another extension is always included when it is used. If you’re creating the set of extensions yourself (for example by exporting a function that returns them), it doesn’t serve much purpose.