Add tooltip with building name and ID on hover

[tomay]

This would apply to the points and footprints

See this example: https://github.com/CartoDB/carto.js/blob/develop/examples/TheHobbitLocations/js/app.js

Though that example relies on a callback from createVis, which we're not using here. So we'll have to feel our way though this using 8 year old docs and examples

┆Issue is synchronized with this Asana task

[tomay]

One big issue, footprints do not have any attributes, apart from an id back to the building data (and this has a different name than it does on the building data)

So this is not going to be straightforward at all

[tomay]

Okay, I've got a roll-your-own tooltip in place:

@danrademacher any thoughts on style or layout? The ID in particular, I'm not sure what treatment makes sense for that. For now it's just pasted in as

`${name}, ${id}`

This is up on staging: https://greeninfo-network.github.io/seattle-building-dashboard/

[tomay]

Inspired by the map popup, I went ahead and gave the tooltip look a similar treatment for Name and ID:

Feel free to reopen if this needs anything else

[danrademacher]

looks excellent!

[tomay]

On production there is an offset, most likely due to this being in an iframe with a header:

• [x] Check if we are in an iframe
• [x] If we are, add/subtract an offset equal to the header height of 136px

[tomay]

This is currently testing for an iframe, but it turns out that we aren't in an iframe, so we need another test so this looks good/works on both staging and production. Could check href for seattle.gov

[tomay]

Trying a more direct approach, that uses Leaflet's latlngToContainerPoint to more directly (I hope) get at the position of the hovered element.

[tomay]

It looks like the root cause of the offset is relative positioning added to .main-container on the Seattle side:

Won't know for sure if this latest change will fix it, but I can mock that on the staging site, and the tooltips follow:

Closing for now, we can reopen if needed following production deploy