Add support for HTMLElements in tooltips

README.md

@@ -92,7 +92,7 @@ const myGraph = new ForceGraph(<myDOMElement>)
 | --- | --- | :--: |
 | <b>nodeRelSize</b>([<i>num</i>]) | Getter/setter for the ratio of node circle area (square px) per value unit. | 4 |
 | <b>nodeVal</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function, attribute or a numeric constant for the node numeric value (affects circle area). | `val` |
-| <b>nodeLabel</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for name (shown in label). Supports plain text or HTML content. Note that this method uses `innerHTML` internally, so make sure to pre-sanitize any user-input content to prevent XSS vulnerabilities. | `name` |
+| <b>nodeLabel</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for name (shown in label). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>nodeVisibility</b>([<i>boolean</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function, attribute or a boolean constant for whether to display the node. | `true` |
 | <b>nodeColor</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for node color (affects circle color). | `color` |
 | <b>nodeAutoColorBy</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function (`fn(node)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects nodes without a color attribute. | |
@@ -103,7 +103,7 @@ const myGraph = new ForceGraph(<myDOMElement>)
 
 | Method | Description | Default |
 | --- | --- | :--: |
-| <b>linkLabel</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for name (shown in label). Supports plain text or HTML content. Note that this method uses `innerHTML` internally, so make sure to pre-sanitize any user-input content to prevent XSS vulnerabilities. | `name` |
+| <b>linkLabel</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for name (shown in label). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
 | <b>linkVisibility</b>([<i>boolean</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a boolean constant for whether to display the link line. A value of `false` maintains the link force without rendering it. | `true` |
 | <b>linkColor</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for line color. | `color` |
 | <b>linkAutoColorBy</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function (`fn(link)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects links without a color attribute. | |

package.json

@@ -58,7 +58,7 @@
     "d3-scale-chromatic": "1 - 3",
     "d3-selection": "2 - 3",
     "d3-zoom": "2 - 3",
-    "float-tooltip": "1",
+    "float-tooltip": "^1.5",
     "index-array-by": "1",
     "kapsule": "^1.16",
     "lodash-es": "4"

src/index.d.ts

@@ -23,6 +23,8 @@ type Accessor<In, Out> = Out | string | ((obj: In) => Out);
 type NodeAccessor<T, N> = Accessor<N, T>;
 type LinkAccessor<T, N, L> = Accessor<L, T>;
 
+type Label = string | HTMLElement;
+
 type CanvasCustomRenderMode = 'replace' | 'before' | 'after';
 export type CanvasCustomRenderModeFn<T> = (obj: T) => CanvasCustomRenderMode | any;
 export type CanvasCustomRenderFn<T> = (obj: T, canvasContext: CanvasRenderingContext2D, globalScale: number) => void;
@@ -64,8 +66,8 @@ export declare class ForceGraphGeneric<ChainableInstance, N extends NodeObject =
   nodeRelSize(size: number): ChainableInstance;
   nodeVal(): NodeAccessor<number, N>;
   nodeVal(valAccessor: NodeAccessor<number, N>): ChainableInstance;
-  nodeLabel(): NodeAccessor<string, N>;
-  nodeLabel(labelAccessor: NodeAccessor<string, N>): ChainableInstance;
+  nodeLabel(): NodeAccessor<Label, N>;
+  nodeLabel(labelAccessor: NodeAccessor<Label, N>): ChainableInstance;
   nodeVisibility(): NodeAccessor<boolean, N>;
   nodeVisibility(visibilityAccessor: NodeAccessor<boolean, N>): ChainableInstance;
   nodeColor(): NodeAccessor<string, N>;
@@ -80,8 +82,8 @@ export declare class ForceGraphGeneric<ChainableInstance, N extends NodeObject =
   nodePointerAreaPaint(renderFn: CanvasPointerAreaPaintFn<N>): ChainableInstance;
 
   // Link styling
-  linkLabel(): LinkAccessor<string, N, L>;
-  linkLabel(labelAccessor: LinkAccessor<string, N, L>): ChainableInstance;
+  linkLabel(): LinkAccessor<Label, N, L>;
+  linkLabel(labelAccessor: LinkAccessor<Label, N, L>): ChainableInstance;
   linkVisibility(): LinkAccessor<boolean, N, L>;
   linkVisibility(visibilityAccessor: LinkAccessor<boolean, N, L>): ChainableInstance;
   linkColor(): LinkAccessor<string, N, L>;

yarn.lock

@@ -1503,10 +1503,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"