Multiple Tooltip Instances

[brycebenson]

I am building out a custom map experience and Mapael allows me to accomplish most everything I am looking to do out of the box.

Essentially, the project involves a map of the US, with cities plotted from some JSON data. I built a custom 'tooltip' window based on some more JSON data for each state that is activated upon touching the corresponding state area (not utilizing the built in tooltip). The positioning of these is fixed, so that piece is all set. Is there a method of disabling area clicks from triggering the tooltip entirely? (area clicks currently reset my plot tooltips)

Additionally, a goal with the plots is to be able to touch them to show the tooltip, while subsequent touches would create a new instance of the tooltip, leaving the other(s) as is until the area/plot is activated again.

I need the 'tooltip' windows for the plots to be positioned as they are out of the box - based on the coords of the plot. Is there any sort of use case functionality like this that has been used, or do I need to create this entirely custom?

[neveldo]

Hello @brycebenson ,

Could you provide a (even partial) JSFiddle example of your map with your current work on tooltips ?

Regarding the position of the tooltip on the page, you can take a look at the elemHover() function within mapael source code, I think it could help you.

Is there a method of disabling area clicks from triggering the tooltip entirely?

I'm not sure to understand what you need, as the mapael built-in tooltip is not affected by the 'click' event. Regarding your custom tooltip mechanism, you should be able to call off() function to unbind previously bound click event.

I need the 'tooltip' windows for the plots to be positioned as they are out of the box - based on the coords of the plot. Is there any sort of use case functionality like this that has been used, or do I need to create this entirely custom?

I think it will be tricky to position a tooltip into the page, next to a plot depending on its latitude and longitude. I think the first step should be to convert the latitude and longitude with the getCoords() function from the map. Then, you should code a sort of inverse function of the mapPagePositionToXY() function in order to translate the (x,y) position of the plot on the map to a x,y position on the page.

I hope it will help you !

[brycebenson]

Thanks for the reply @neveldo

As for the 'disabling area clicks', I meant to keep the functionality of areas without triggering the reset of the tooltip window (for example, if a plot tooltip is active, activating another area will reset the tooltip and remove it from the previous plot).

You can find a working example here

Here is a fiddle for the JS

Keep in mind this is for an interactive 4k wall so it only will work appropriately set in 4k (3840x2160) and requires tap events to activate the areas/plots (which I am simulating with Chrome dev tools). The data is temp so you can use CA/NY to see what I am trying to do.

Essentially the map is split into 3 columns that I want to be independent (the custom area 'tooltips' I built accomplish this). I have built out enough logic to accomodate this except for the plot tooltips. Ideally, the plot tooltips could have separate instances so someone could tap on a plot in CA as well as NY and both tooltips would be active until another area/plot within that area/column is activated.

Let me know if you'd like further clarification.

[neveldo]

Hello @brycebenson ,

Sorry for my late answer, maybe you have solved the remaining issues for now ?

I seems that the JSFiddle is not working, it doesn't show anything for me.

Regarding the tooltip(s), the built-in tooltip feature handle only a single tooltip container within the DOM. In order to deal with multiple tooltip open at the same time, I think you will have to create your own tooltip mechanism over mapael, in order to create a new container for each map plots as it would be tricky to extend the built-in tooltip for your needs. I think, it would allow you to handle more easily several tooltips open at the same time.