Allow multiple tooltip entries by cloning

bokehjs/src/lib/models/dom/value_of.ts

@@ -1,12 +1,10 @@
-import {DOMNode, DOMNodeView} from "./dom_node"
+import {DOMElement, DOMElementView} from "./dom_element"
 import {HasProps} from "core/has_props"
-import {empty} from "core/dom"
 import {to_string} from "core/util/pretty"
 import type * as p from "core/properties"
 
-export class ValueOfView extends DOMNodeView {
+export class ValueOfView extends DOMElementView {
   declare model: ValueOf
-  declare el: HTMLElement
 
   override connect_signals(): void {
     super.connect_signals()
@@ -17,8 +15,8 @@ export class ValueOfView extends DOMNodeView {
     }
   }
 
-  render(): void {
-    empty(this.el)
+  override render(): void {
+    super.render()
     this.el.style.display = "contents"
 
     const text = (() => {
@@ -37,15 +35,15 @@ export class ValueOfView extends DOMNodeView {
 
 export namespace ValueOf {
   export type Attrs = p.AttrsOf<Props>
-  export type Props = DOMNode.Props & {
+  export type Props = DOMElement.Props & {
     obj: p.Property<HasProps>
     attr: p.Property<string>
   }
 }
 
 export interface ValueOf extends ValueOf.Attrs {}
 
-export class ValueOf extends DOMNode {
+export class ValueOf extends DOMElement {
   declare properties: ValueOf.Props
   declare __view_type__: ValueOfView
 

bokehjs/src/lib/models/tools/inspectors/hover_tool.ts

@@ -19,7 +19,7 @@ import {isFunction, isNumber, isString, is_undefined} from "core/util/types"
 import {tool_icon_hover} from "styles/icons.css"
 import * as styles from "styles/tooltips.css"
 import {Tooltip} from "../../ui/tooltip"
-import {DOMNode} from "../../dom/dom_node"
+import {DOMElement} from "../../dom/dom_element"
 import {PlaceholderView} from "../../dom/placeholder"
 import {TemplateView} from "../../dom/template"
 import type {GlyphView} from "../../glyphs/glyph"
@@ -105,7 +105,7 @@ export class HoverToolView extends InspectToolView {
 
   protected readonly _ttviews: ViewStorage<Tooltip> = new Map()
   protected _template_el?: HTMLElement
-  protected _template_view?: ViewOf<DOMNode>
+  protected _template_view?: ViewOf<DOMElement>
 
   override *children(): IterViews {
     yield* super.children()
@@ -120,7 +120,7 @@ export class HoverToolView extends InspectToolView {
     await this._update_ttmodels()
 
     const {tooltips} = this.model
-    if (tooltips instanceof DOMNode) {
+    if (tooltips instanceof DOMElement) {
       this._template_view = await build_view(tooltips, {parent: this.plot_view.canvas})
       this._template_view.render()
     }
@@ -613,7 +613,7 @@ export class HoverToolView extends InspectToolView {
     return el
   }
 
-  _render_tooltips(ds: ColumnarDataSource, vars: TooltipVars): Node | null {
+  _render_tooltips(ds: ColumnarDataSource, vars: TooltipVars): Element | null {
     const {tooltips} = this.model
     const i = vars.index
 
@@ -622,11 +622,11 @@ export class HoverToolView extends InspectToolView {
       return div(content)
     } else if (isFunction(tooltips)) {
       return tooltips(ds, vars)
-    } else if (tooltips instanceof DOMNode) {
+    } else if (tooltips instanceof DOMElement) {
       const {_template_view} = this
       assert(_template_view != null)
       this._update_template(_template_view, ds, i, vars)
-      return _template_view.el
+      return _template_view.el.cloneNode(true) as HTMLElement
     } else if (tooltips != null) {
       const template = this._template_el ?? (this._template_el = this._create_template(tooltips))
       return this._render_template(template, tooltips, ds, vars)
@@ -635,7 +635,7 @@ export class HoverToolView extends InspectToolView {
     }
   }
 
-  protected _update_template(template_view: ViewOf<DOMNode>, ds: ColumnarDataSource, i: Index | null, vars: TooltipVars): void {
+  protected _update_template(template_view: ViewOf<DOMElement>, ds: ColumnarDataSource, i: Index | null, vars: TooltipVars): void {
     const {formatters} = this.model
     if (template_view instanceof TemplateView) {
       template_view.update(ds, i, vars, formatters)
@@ -653,7 +653,7 @@ export namespace HoverTool {
   export type Attrs = p.AttrsOf<Props>
 
   export type Props = InspectTool.Props & {
-    tooltips: p.Property<null | DOMNode | string | [string, string][] | ((source: ColumnarDataSource, vars: TooltipVars) => HTMLElement)>
+    tooltips: p.Property<null | DOMElement | string | [string, string][] | ((source: ColumnarDataSource, vars: TooltipVars) => HTMLElement)>
     formatters: p.Property<Formatters>
     renderers: p.Property<DataRenderer[] | "auto">
     mode: p.Property<HoverMode>
@@ -681,7 +681,7 @@ export class HoverTool extends InspectTool {
     this.prototype.default_view = HoverToolView
 
     this.define<HoverTool.Props>(({Any, Bool, Str, List, Tuple, Dict, Or, Ref, Func, Auto, Nullable}) => ({
-      tooltips: [ Nullable(Or(Ref(DOMNode), Str, List(Tuple(Str, Str)), Func<[ColumnarDataSource, TooltipVars], HTMLElement>())), [
+      tooltips: [ Nullable(Or(Ref(DOMElement), Str, List(Tuple(Str, Str)), Func<[ColumnarDataSource, TooltipVars], HTMLElement>())), [
         ["index",         "$index"    ],
         ["data (x, y)",   "($x, $y)"  ],
         ["screen (x, y)", "($sx, $sy)"],

src/bokeh/models/dom.py

@@ -139,7 +139,7 @@ def __init__(self, *args, **kwargs) -> None:
     groups = List(Instance(".models.renderers.RendererGroup"))
 
 @abstract
-class Placeholder(DOMNode):
+class Placeholder(DOMElement):
 
     # explicit __init__ to support Init signatures
     def __init__(self, *args, **kwargs) -> None:

src/bokeh/models/tools.py

@@ -95,7 +95,7 @@
 from ..util.strings import nice_join
 from .annotations import BoxAnnotation, PolyAnnotation, Span
 from .callbacks import Callback
-from .dom import DOMNode
+from .dom import DOMElement
 from .glyphs import (
     HStrip,
     Line,
@@ -1290,7 +1290,7 @@ def __init__(self, *args, **kwargs) -> None:
     :geometry: object containing the coordinates of the hover cursor
     """)
 
-    tooltips = Either(Null, Instance(DOMNode), String, List(Tuple(String, String)),
+    tooltips = Either(Null, Instance(DOMElement), String, List(Tuple(String, String)),
         default=[
             ("index","$index"),
             ("data (x, y)","($x, $y)"),

tests/baselines/defaults.json5

@@ -2266,7 +2266,7 @@
     __extends__: "bokeh.models.dom.Placeholder",
   },
   "bokeh.models.dom.Placeholder": {
-    __extends__: "bokeh.models.dom.DOMNode",
+    __extends__: "bokeh.models.dom.DOMElement",
   },
   "bokeh.models.dom.Span": {
     __extends__: "bokeh.models.dom.DOMElement",