Is it possible to keep tooltip display all the time?

[elite0226]

I am using this library for my commercial uses. And I want this library to hold tooltip (which renders as pointLabel) display all the time. Currently it only appears when hovering.

[vasturiano]

@elite0226 for this I would recommend to use the Labels layer.

[elite0226]

@vasturiano Thanks for your info. Could you please provide me some more examples for using Labels layer? More detailed example I wish. Thanks.

[vasturiano]

@elite0226 please see the Map Labels example.

[mattrothenberg]

@vasturiano Not the OP here, but I wonder if you could shed light on a different approach than using the labels layer.

For instance, the examples here feature a (semi) persistent "tooltip" inside of which you can put arbitrary HTML/CSS.

https://globekit.co/

I've noticed that the globe already has a .scene-tooltip div that has an absolute position corresponding to where the cursor is at any given time. Would it be possible to either:

1. Expose an API for putting HTML/CSS into this div (via a render prop)
2. Expose a prop that makes polygon/label tooltips persistent (that is, always visible, not just on hover), since these already live inside of .scene-tooltip

Thanks!

[vasturiano]

Hi @mattrothenberg, thanks for reaching out.

1. Expose an API for putting HTML/CSS into this div (via a render prop)

It's already possible to use HTML/CSS in the content of this tooltip div. It's not done via render prop (mainly because this component is a wrapper around globe.gl, which does not understand JSX), but you can simply input HTML syntax into the return string of the method.

2. Expose a prop that makes polygon/label tooltips persistent (that is, always visible, not just on hover), since these already live inside of .scene-tooltip

The issue here is that there is only one .scene-tooltip div element. And this is the div that belongs to the pointer and follows its position. So, even though its content is re-populated depending on the item that is being hovered it's still just a single element. Your approach presumes there is a dedicated tooltip element per object on the scene, and thus its visibility could just be toggled on/off programatically. This approach has potentially some performance issues because of the amount of extra DOM elements that would exist on the page, possibly hindering the component performance. Additionally there is the challenge of knowing where to place the element in the XY space (and constantly adjusting it depending on the globe zoom/pan) relative to the object's 3D coordinates.

Essentially these concerns is what led to the approach of using dedicated label objects (that belong to the 3D domain, not the 2D screen space like the pointer tooltips) that can be placed in any geographical location, and be fully controlled programmatically. These can be added using the Labels layer.

[mattrothenberg]

@vasturiano Understood, thanks for the explanation. I'll have to find a workaround, as the label layer you're referring to is visually (and behaviorally) distinct from the tooltip layer, creating a very different end result.

Labels are visually distorted (as they belong to the 3D domain, like you mention).

Tooltips are not distorted (as they belong to the 2D domain, like you mention)

[mattrothenberg]

@vasturiano @elite0226

I hacked together the following prototype for custom tooltips.

https://user-images.githubusercontent.com/5148596/145433646-13b8099d-88c6-46f5-ab1e-8ae20b2b3a1b.mp4

Code https://stackblitz.com/edit/react-ts-wobqae?file=index.tsx

I definitely ran into some perf issues, and I welcome any/all feedback to make this smoother (if this seems like a feasible strategy 😄 )

[SmoothMC]

Hey @mattrothenberg,

do you have your code snipped for me again. The link from your post doesn't work anymore. I try to do the same thing

thanks!

[mattrothenberg]

@SmoothMC I don't have it anymore, but it was basically this: https://vasturiano.github.io/react-globe.gl/example/html-markers/

[VertikaJain]

@mattrothenberg, we are also trying something similar, and combined htmlElement with the polygons properties to keep the tooltip sticky. But one issue we noticed was that when we click on one country, the sticky tooltip (htmlElement) appears and stays for the clicked country, but the hovered tooltip (polygonLabel) doesn't disappear at the same second for the same country. It only disappears when we hover somewhere else. Sharing an example here:

https://github.com/vasturiano/react-globe.gl/assets/40227841/9049a73c-31b5-4679-b9f7-179f785988ba