How do I display a tooltip on SVG Circle Element

Grafana Plugin Development
1

Hi there

I am creating a panel plugin that displays paths onto a floor plan. Therefor I use SVG Paths and a circle element at the end of the path. Now i would like to display a tooltip above that cirlce with additional informations queried from the data source.
I already looked into the Tooltip Element from the Grafana UI but i think that isn’t working inside a svg element. Please, learn me better if this is wrong.

paths.push(
  <Tooltip content={session.duration} theme="info">
     <circle cx={lastPoint.x} cy={lastPoint.z} r={pointSize} fill={options.tracePointColor} />
  </Tooltip>
);
// ..............

return (
  <div>
    <svg>
      {paths}
    </svg>
  </div>
)

So can someone give me a hint how i can achieve my goal. Are there some examples i can see? Or do I have to build it myself in SVG?

tooltip

Thank you for your answers!

1 Like
2

Given that I use Tippy over the Tooltip in grafana/ui, your example looks good to me. By “doesn’t work”, I assume you mean it’s not being displayed at all?

Here are a couple of examples how I’m using tooltips in my plugins:

Treemap:

Hourly heatmap:

3

Yes, it’s not being displayed at all.

And i would expect to see an element around the circle element, but there is nothing.

image

4

the problem is that you cannot mix react and svg tags (or default html tags inside svg elements)

if you use d3, or native html you can do this using native listener for mouse events (i guess the react tooltip components do the same behind the scenes)

here you have examples using d3, but i guess i you haven’t used d3 so far you should use the native events

1 Like
5

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.