Add support for HTMLElements in tooltips

README.md

@@ -141,7 +141,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>pointsData</b>([<i>array</i>]) | Getter/setter for the list of points to represent in the points map layer. Each point is displayed as a cylindrical 3D object rising perpendicularly from the surface of the globe. | `[]` |
-| <b>pointLabel</b>([<i>str</i> or <i>fn</i>]) | Point object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | `name` |
+| <b>pointLabel</b>([<i>str</i> or <i>fn</i>]) | Point object accessor function or attribute for label (shown as tooltip). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>pointLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Point object accessor function, attribute or a numeric constant for the cylinder's center latitude coordinate. | `lat` |
 | <b>pointLng</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Point object accessor function, attribute or a numeric constant for the cylinder's center longitude coordinate. | `lng` |
 | <b>pointColor</b>([<i>str</i> or <i>fn</i>]) | Point object accessor function or attribute for the cylinder color. | `() => '#ffffaa'` |
@@ -163,7 +163,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>arcsData</b>([<i>array</i>]) | Getter/setter for the list of links to represent in the arcs map layer. Each link is displayed as an arc line that rises from the surface of the globe, connecting the start and end coordinates. | `[]` |
-| <b>arcLabel</b>([<i>str</i> or <i>fn</i>]) | Arc object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | `name` |
+| <b>arcLabel</b>([<i>str</i> or <i>fn</i>]) | Arc object accessor function or attribute for label (shown as tooltip). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>arcStartLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Arc object accessor function, attribute or a numeric constant for the line's start latitude coordinate. | `startLat` |
 | <b>arcStartLng</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Arc object accessor function, attribute or a numeric constant for the line's start longitude coordinate. | `startLng` |
 | <b>arcEndLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Arc object accessor function, attribute or a numeric constant for the line's end latitude coordinate. | `endLat` |
@@ -192,7 +192,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>polygonsData</b>([<i>array</i>]) | Getter/setter for the list of polygon shapes to represent in the polygons map layer. Each polygon is displayed as a shaped cone that extrudes from the surface of the globe. | `[]` |
-| <b>polygonLabel</b>([<i>str</i> or <i>fn</i>]) | Polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | `name` |
+| <b>polygonLabel</b>([<i>str</i> or <i>fn</i>]) | Polygon object accessor function or attribute for label (shown as tooltip). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>polygonGeoJsonGeometry</b>([<i>str</i> or <i>fn</i>]) | Polygon object accessor function or attribute for the GeoJson geometry specification of the polygon's shape. The returned value should have a minimum of two fields: `type` and `coordinates`. Only GeoJson geometries of type `Polygon` or `MultiPolygon` are supported, other types will be skipped. | `geometry` |
 | <b>polygonCapColor</b>([<i>str</i> or <i>fn</i>]) | Polygon object accessor function or attribute for the color of the top surface. | `() => '#ffffaa'` |
 | <b>polygonCapMaterial</b>([<i>material</i>, <i>str</i> or <i>fn</i>]) | Polygon object accessor function, attribute or material object for the [ThreeJS material](https://threejs.org/docs/#api/en/materials/Material) to use in the top surface. This property takes precedence over `polygonCapColor`, which will be ignored if both are defined. | - |
@@ -215,7 +215,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>pathsData</b>([<i>array</i>]) | Getter/setter for the list of lines to represent in the paths map layer. Each path is displayed as a line that connects all the coordinate pairs in the path array. | `[]` |
-| <b>pathLabel</b>([<i>str</i> or <i>fn</i>]) | Path object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | `name` |
+| <b>pathLabel</b>([<i>str</i> or <i>fn</i>]) | Path object accessor function or attribute for label (shown as tooltip). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>pathPoints</b>([<i>array</i>, <i>str</i> or <i>fn</i>]) | Path object accessor function, attribute or an array for the set of points that define the path line. By default, each path point is assumed to be a 2-position array (`[<lat>, <lon>]`). This default behavior can be modified using the `pathPointLat` and `pathPointLng` methods. | `pnts => pnts` |
 | <b>pathPointLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Path point object accessor function, attribute or a numeric constant for the latitude coordinate. | `arr => arr[0]` |
 | <b>pathPointLng</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Path point object accessor function, attribute or a numeric constant for the longitude coordinate. | `arr => arr[1]` |
@@ -264,7 +264,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>hexBinPointsData</b>([<i>array</i>]) | Getter/setter for the list of points to aggregate using the hex bin map layer. Each point is added to an hexagonal prism 3D object that represents all the points within a tesselated portion of the space. | `[]` |
-| <b>hexLabel</b>([<i>str</i> or <i>fn</i>]) | Hex object accessor function or attribute for label (shown as tooltip). An hex object includes all points binned, and has the syntax: `{ points, sumWeight, center: { lat, lng } }`. Supports plain text or HTML content. | - |
+| <b>hexLabel</b>([<i>str</i> or <i>fn</i>]) | Hex object accessor function or attribute for label (shown as tooltip). An hex object includes all points binned, and has the syntax: `{ points, sumWeight, center: { lat, lng } }`. Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | - |
 | <b>hexBinPointLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Point object accessor function, attribute or a numeric constant for the latitude coordinate. | `lat` |
 | <b>hexBinPointLng</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Point object accessor function, attribute or a numeric constant for the longitude coordinate. | `lng` |
 | <b>hexBinPointWeight</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Point object accessor function, attribute or a numeric constant for the weight of the point. Weights for points in the same bin are summed and determine the hexagon default altitude. | 1 |
@@ -289,7 +289,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>hexPolygonsData</b>([<i>array</i>]) | Getter/setter for the list of polygon shapes to represent in the hexed polygons map layer. Each polygon is displayed as a tesselated group of hexagons that approximate the polygons shape according to the resolution specified in `hexPolygonResolution`. | `[]` |
-| <b>hexPolygonLabel</b>([<i>str</i> or <i>fn</i>]) | Hexed polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | `name` |
+| <b>hexPolygonLabel</b>([<i>str</i> or <i>fn</i>]) | Hexed polygon object accessor function or attribute for label (shown as tooltip). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>hexPolygonGeoJsonGeometry</b>([<i>str</i> or <i>fn</i>]) | Hexed polygon object accessor function or attribute for the GeoJson geometry specification of the polygon's shape. The returned value should have a minimum of two fields: `type` and `coordinates`. Only GeoJson geometries of type `Polygon` or `MultiPolygon` are supported, other types will be skipped. | `geometry` |
 | <b>hexPolygonColor</b>([<i>str</i> or <i>fn</i>]) | Hexed polygon object accessor function or attribute for the color of each hexagon in the polygon. | `() => '#ffffaa'` |
 | <b>hexPolygonAltitude</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Hexed polygon object accessor function, attribute or a numeric constant for the polygon's hexagons altitude in terms of globe radius units (`0` = 0 altitude, `1` = globe radius). | 0.001 |
@@ -312,7 +312,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>tilesData</b>([<i>array</i>]) | Getter/setter for the list of tiles to represent in the tiles map layer. Each tile is displayed as a spherical surface segment. The segments can be placed side-by-side for a tiled surface and each can be styled separately. | `[]` |
-| <b>tileLabel</b>([<i>str</i> or <i>fn</i>]) | Tile object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | `name` |
+| <b>tileLabel</b>([<i>str</i> or <i>fn</i>]) | Tile object accessor function or attribute for label (shown as tooltip). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>tileLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Tile object accessor function, attribute or a numeric constant for the segment's centroid latitude coordinate. | `lat` |
 | <b>tileLng</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Tile object accessor function, attribute or a numeric constant for the segment's centroid longitude coordinate. | `lng` |
 | <b>tileAltitude</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Tile object accessor function, attribute or a numeric constant for the segment's altitude in terms of globe radius units. | 0.01 |
@@ -353,7 +353,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>labelsData</b>([<i>array</i>]) | Getter/setter for the list of label objects to represent in the labels map layer. | `[]` |
-| <b>labelLabel</b>([<i>str</i> or <i>fn</i>]) | Label object accessor function or attribute for its own tooltip label. Supports plain text or HTML content. | - |
+| <b>labelLabel</b>([<i>str</i> or <i>fn</i>]) | Label object accessor function or attribute for its own tooltip label. Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | - |
 | <b>labelLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Label object accessor function, attribute or a numeric constant for the latitude coordinate. | `lat` |
 | <b>labelLng</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Label object accessor function, attribute or a numeric constant for the longitude coordinate. | `lng` |
 | <b>labelText</b>([<i>str</i> or <i>fn</i>]) | Label object accessor function or attribute for the label text. | `text` |
@@ -395,7 +395,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>objectsData</b>([<i>array</i>]) | Getter/setter for the list of custom 3D objects to represent in the objects layer. Each object is rendered according to the `objectThreeObject` method. | `[]` |
-| <b>objectLabel</b>([<i>str</i> or <i>fn</i>]) | Object accessor function or attribute for its own tooltip label. Supports plain text or HTML content. | `name` |
+| <b>objectLabel</b>([<i>str</i> or <i>fn</i>]) | Object accessor function or attribute for its own tooltip label. Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>objectLat</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Object accessor function, attribute or a numeric constant for the latitude coordinate of the object's position. | `lat` |
 | <b>objectLng</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Object accessor function, attribute or a numeric constant for the longitude coordinate of the object's position. | `lng` |
 | <b>objectAltitude</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Object accessor function, attribute or a numeric constant for the altitude coordinate of the object's position, in terms of globe radius units. | 0.01 |
@@ -415,7 +415,7 @@ new Globe(<domElement>, { configOptions })
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>customLayerData</b>([<i>array</i>]) | Getter/setter for the list of items to represent in the custom map layer. Each item is rendered according to the `customThreeObject` method. | `[]` |
-| <b>customLayerLabel</b>([<i>str</i> or <i>fn</i>]) | Object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content. | `name` |
+| <b>customLayerLabel</b>([<i>str</i> or <i>fn</i>]) | Object accessor function or attribute for label (shown as tooltip). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>customThreeObject</b>([<i>Object3d</i>, <i>str</i> or <i>fn</i>]) | Object accessor function or attribute for generating a custom 3d object to render as part of the custom map layer. Should return an instance of [ThreeJS Object3d](https://threejs.org/docs/index.html#api/core/Object3D). | `null` |
 | <b>customThreeObjectUpdate</b>([<i>str</i> or <i>fn</i>]) | Object accessor function or attribute for updating an existing custom 3d object with new data. This can be used for performance improvement on data updates as the objects don't need to be removed and recreated at each update. The callback method's signature includes the object to be update and its new data: `customThreeObjectUpdate((obj, objData) => { ... })`. | `null` |
 | <b>onCustomLayerClick</b>(<i>fn</i>) | Callback function for custom object (left-button) clicks. The custom object, the event object and the clicked coordinates are included as arguments: `onCustomLayerClick(obj, event, { lat, lng, altitude })`. | - |

package.json

@@ -53,7 +53,7 @@
     "kapsule": "^1.16",
     "three": ">=0.154 <1",
     "three-globe": "^2.40",
-    "three-render-objects": "^1.33"
+    "three-render-objects": "^1.34"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

src/index.d.ts

@@ -10,6 +10,8 @@ export interface ConfigOptions extends ThreeGlobeConfigOptions {
 type Accessor<In, Out> = Out | string | ((obj: In) => Out);
 type ObjAccessor<T> = Accessor<object, T>;
 
+type Label = string | HTMLElement;
+
 interface HexBin {
   points: object[],
   sumWeight: number,
@@ -44,24 +46,24 @@ interface GlobeGenericInstance<ChainableInstance>
   backgroundImageUrl(url: string | null): ChainableInstance;
 
   // Labels
-  pointLabel(): ObjAccessor<string>;
-  pointLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
-  arcLabel(): ObjAccessor<string>;
-  arcLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
-  polygonLabel(): ObjAccessor<string>;
-  polygonLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
-  pathLabel(): ObjAccessor<string>;
-  pathLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
-  hexLabel(): Accessor<HexBin, string>;
-  hexLabel(textAccessor: Accessor<HexBin, string>): ChainableInstance;
-  tileLabel(): ObjAccessor<string>;
-  tileLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
-  labelLabel(): ObjAccessor<string>;
-  labelLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
-  objectLabel(): ObjAccessor<string>;
-  objectLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
-  customLayerLabel(): ObjAccessor<string>;
-  customLayerLabel(textAccessor: ObjAccessor<string>): ChainableInstance;
+  pointLabel(): ObjAccessor<Label>;
+  pointLabel(textAccessor: ObjAccessor<Label>): ChainableInstance;
+  arcLabel(): ObjAccessor<Label>;
+  arcLabel(textAccessor: ObjAccessor<Label>): ChainableInstance;
+  polygonLabel(): ObjAccessor<Label>;
+  polygonLabel(textAccessor: ObjAccessor<Label>): ChainableInstance;
+  pathLabel(): ObjAccessor<Label>;
+  pathLabel(textAccessor: ObjAccessor<Label>): ChainableInstance;
+  hexLabel(): Accessor<HexBin, Label>;
+  hexLabel(textAccessor: Accessor<HexBin, Label>): ChainableInstance;
+  tileLabel(): ObjAccessor<Label>;
+  tileLabel(textAccessor: ObjAccessor<Label>): ChainableInstance;
+  labelLabel(): ObjAccessor<Label>;
+  labelLabel(textAccessor: ObjAccessor<Label>): ChainableInstance;
+  objectLabel(): ObjAccessor<Label>;
+  objectLabel(textAccessor: ObjAccessor<Label>): ChainableInstance;
+  customLayerLabel(): ObjAccessor<Label>;
+  customLayerLabel(textAccessor: ObjAccessor<Label>): ChainableInstance;
 
   // Interaction events
   onGlobeClick(callback: (coords: { lat: number, lng: number }, event: MouseEvent) => void): ChainableInstance;

yarn.lock

@@ -1509,10 +1509,10 @@ fdir@^6.2.0:
   resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.2.tgz#ddaa7ce1831b161bc3657bb99cb36e1622702689"
   integrity sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==
 
-float-tooltip@1:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/float-tooltip/-/float-tooltip-1.4.2.tgz#a128f389aa45a6149ed2f27aae40151653e39479"
-  integrity sha512-sKWm5Q9YKBgpli8c5VEADvBYYH2Jqy+RH/m7FUbDMPUuoXYMRBVYppp8+dDv962XiE2kCKt7TIOV3lUQ+nK0Pw==
+float-tooltip@^1.5:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/float-tooltip/-/float-tooltip-1.5.0.tgz#0e97c4497d5b59a7b3f37b5ff9826b7ab6448668"
+  integrity sha512-CdpIbFdc7PSN+xhJXnAijWhha2vkdrrMRYpyfvrP3kKGJHJP404UrREVvMlKXQq2UXkb9G5oiyPTa5Kq6gRXjg==
   dependencies:
     d3-selection "2 - 3"
     kapsule "^1.16"
@@ -2490,14 +2490,14 @@ three-globe@^2.40:
     tinycolor2 "1"
     yaot "^1.1"
 
-three-render-objects@^1.33:
-  version "1.33.2"
-  resolved "https://registry.yarnpkg.com/three-render-objects/-/three-render-objects-1.33.2.tgz#2280e0fbd6790fb0c873ecae7517a30ec1428c05"
-  integrity sha512-l2FGxj0SWl0i/aXo3a3CaqVV3yu6z6NN36PNuDfd2dcjbxuqofOY0vQ6yOKqrP18zaDsgo9Wu8pZQAfosSnkfg==
+three-render-objects@^1.34:
+  version "1.34.0"
+  resolved "https://registry.yarnpkg.com/three-render-objects/-/three-render-objects-1.34.0.tgz#f644b5ff1e1abd91cd883f24c0b0afaee2d862a3"
+  integrity sha512-6/+Eq+zSdB/8MlBVhwbR75UJQQn439cZL8jf9qMVv6RLERXZ1CwzjVHdOb2hciQg2gWKHcy2qL7uyR6IOQwa/w==
   dependencies:
     "@tweenjs/tween.js" "18 - 25"
     accessor-fn "1"
-    float-tooltip "1"
+    float-tooltip "^1.5"
     kapsule "^1.16"
     polished "4"