[BUG] Tooltips are not displayed in SVG

[markus-hampel]

Describe the bug

I'm not able to see any hover tooltips in your examples, nor if I try it myself. Since I'm new to Notebooks and this library maybe I'm doing something wrong,, then help would me much appreciated.

val time = listOf("2021", "2022", "2023", "2024")
val accesses = listOf(150, 200, 175, 250)
val dataFrame = dataFrameOf(
    "pointInTime" to time,
    "numberOfAccesses" to accesses
)

return dataFrame.plot {
   bars {
       x("pointInTime")
       y("numberOfAccesses")

       tooltips{
          line("${value("numberOfAccesses")}")
       }
   }
}.toSVG()

Expected behavior

Hovering over a point or bar should show the tooltip

Actual Behavior

Hovering over a point or bar doesn't show the tooltip

Screenshots

Expected:

Current:
https://github.com/Kotlin/kandy/blob/main/examples/notebooks/lets-plot/guides/tooltips.ipynb

Library Version, Tool version, and Environment

(please complete the following information):

• Library version: 0.7.0
• Kotlin-Gradle environment: kotlin 2.0.21
• Tried in Chrome: 131.0.6778.86 and Firefox: 133

Additional information

[AndreiKingsley]

Hello! Tooltips are only available with interactive renderers, such as Web (HTML + JS) or Java Swing.

When working in Jupyter or Kotlin Notebook, plots are rendered in the output cell. This happens automatically when the plot is the last statement in the cell, or explicitly when you use the DISPLAY(plot) function. In these environments, the Web renderer is used in Jupyter, while the Swing renderer (by default) is used in Kotlin Notebook.

If you export a plot as an SVG image, tooltip information is not included, as SVGs are static and lack interactivity. If you're working outside a notebook and want to enable interactive tooltips, you can either save the plot as an HTML (with .toHTML() or .save() into HTML file) or render it using Swing - for an example and a temporary workaround, check out this example project.

[AndreiKingsley]

Oh, and tooltips don’t work on GitHub either — JavaScript doesn’t render in notebooks, so raw SVGs are used for rendering. However, tooltips function correctly on interactive notebook platforms like Datalore or NBViewer.

For example, here's notebook you mentioned on Datalore.

[markus-hampel]

Hey, thanks for the quick response.
Adding tooltips to svg is possible in different ways.
Here is an example of adding tooltips with HTML/CSS or JS.
Would it be possible to add the title element to the rect element?

[markus-hampel]

It's more of a feature request then a bug.