# How to add tooltip on svg circle

**URL:** https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389
**Category:** Dashboard
**Created:** [6 September 2022 11:38 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389 "2022-09-06T11:38:39Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![node-to](https://avatars.discourse-cdn.com/v4/letter/n/8baadc/32.png) [@node-to](https://discourse.nodered.org/u/node-to)
#### Post date: [6 September 2022 11:38 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389/1 "2022-09-06T11:38:39Z")

</div>

The below image shows the parking slot as rectangular box and the circles are the car. Now I do no which car is where to know, if I click on the circle a popup must appear with info of parking zone, number, parking id.  
currently I am using Database to get this info, but not able to create popup  
so any one can help me to do.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd9a5dbc57db3e8425c09eda4ddfc09d1497c75a.png)

here is flow:

```auto
[
    {
        "id": "a75ac852460b4d1e",
        "type": "ui_svg_graphics",
        "z": "2b2aa94b2bd21ec3",
        "group": "453e380f41276a83",
        "order": 0,
        "width": "22",
        "height": "12",
        "svgString": "<div id=\"graphics\" ng-init=\"checkSVG()\">\n \n <!-- SVG FILE CONTENT BELOW -->\n \n <svg viewBox=\"-34.407 -107.482 1146.86 663.026\" width=\"1146.86\" height=\"663.026\">\n \n <g transform=\"matrix(1, 0, 0, 1, 244.467865, -45.879433)\" id=\"Zones@cx_hide\">\n \n <rect x=\"-240.527\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone8</title>\n </rect>\n \n <rect x=\"-104.527\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone7</title>\n </rect>\n \n <rect x=\"31.527\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone6</title>\n </rect>\n \n <rect x=\"167\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone5</title>\n </rect>\n \n <rect x=\"303\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone4</title>\n </rect>\n \n <rect x=\"439\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone3</title>\n </rect>\n \n <rect x=\"575\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone2</title>\n </rect>\n \n <rect x=\"711\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone1</title>\n </rect>\n </g>\n \n \n </svg>\n </div>",
        "clickableShapes": [],
        "javascriptHandlers": [],
        "smilAnimations": [],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": false,
        "showBrowserEvents": false,
        "enableJsDebugging": false,
        "sendMsgWhenLoaded": false,
        "noClickWhenDblClick": false,
        "outputField": "payload",
        "editorUrl": "//drawsvg.org/drawsvg.html",
        "directory": "",
        "panning": "disabled",
        "zooming": "disabled",
        "panOnlyWhenZoomed": false,
        "doubleClickZoomEnabled": false,
        "mouseWheelZoomEnabled": false,
        "dblClickZoomPercentage": 150,
        "cssString": "div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}",
        "name": "",
        "x": 920,
        "y": 620,
        "wires": [
            []
        ]
    },
    {
        "id": "4fafd51b57659e1b",
        "type": "function",
        "z": "2b2aa94b2bd21ec3",
        "name": "function 48",
        "func": "// The input message contains your circles\nvar circles = msg.payload || [];\n\n// Remove all existing circles\nnode.send({\n payload: {\n command: \"remove_element\", \n selector: \"circle\"\n }\n})\n\nvar circleCount = circles.length;\n\nfor(var i=0; i<circleCount; i++) {\n circle = circles[i];\n \n node.send({\n payload: {\n command: \"add_element\", \n elementType: \"circle\",\n elementId: \"circle_\" + i,\n event:\"click\",\n elementAttributes: {\n cx: circle.x,\n cy: circle.y,\n r: circle.radius,\n fill:circle.c1,\n stroke:circle.c2,\n title:circle.tx,\n }\n }\n \n })\n}\n// Show the number of circles\nnode.send({\n payload: {\n command: \"update_text\",\n selector: \"#circle_count\",\n textContent: circleCount\n }\n})\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 630,
        "y": 620,
        "wires": [
            [
                "a75ac852460b4d1e"
            ]
        ]
    },
    {
        "id": "1ac71b6f7f94c911",
        "type": "inject",
        "z": "2b2aa94b2bd21ec3",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[\t {\t \"x\": 96.886,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"##ff0000\"\t },\t {\t \"x\": 234.652,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 368.054,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 505.99,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 642.397,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 778.435,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t }\t]",
        "payloadType": "jsonata",
        "x": 380,
        "y": 620,
        "wires": [
            [
                "4fafd51b57659e1b"
            ]
        ]
    },
    {
        "id": "453e380f41276a83",
        "type": "ui_group",
        "name": "testing",
        "tab": "b85432d79dbc660a",
        "order": 1,
        "disp": true,
        "width": "22",
        "collapse": false
    },
    {
        "id": "b85432d79dbc660a",
        "type": "ui_tab",
        "name": "ZONE MONITORING",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

### Author: ![mudwalker](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@mudwalker](https://discourse.nodered.org/u/mudwalker)
#### Post date: [6 September 2022 11:52 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389/2 "2022-09-06T11:52:24Z")

</div>

If you read [these instructions](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) on how to post a flow, other Forum Members will be able to see the flow correctly and so be in more of a position to help you. As it stands, it is 'just text'..

You can edit your original post to display correctly.

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [6 September 2022 22:13 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389/3 "2022-09-06T22:13:42Z")

</div>

@node-to,  
Yes it indeed seems a bit confusing how this works. You have set a `title` attribute value on your circles, like you would need to do in standard html (e.g. on a `div` element).  
But it seems that for SVG (see e.g. [here](https://stackoverflow.com/a/10643523) that you need to create a child `title` element.  
My time is up for today. If you don't know how to do that with the svg node, I will need to have a look myself tomorrow evening...  
Bart

---

<div class="post-metadata">

### Author: ![node-to](https://avatars.discourse-cdn.com/v4/letter/n/8baadc/32.png) [@node-to](https://discourse.nodered.org/u/node-to)
#### Post date: [7 September 2022 04:19 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389/4 "2022-09-07T04:19:51Z")

</div>

sorry sir I am not able to add title

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [7 September 2022 21:26 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389/5 "2022-09-07T21:26:29Z")

</div>

@node-to,

## Method 1 - tooltips

I have quickly updated your example:

```auto
[{"id":"a75ac852460b4d1e","type":"ui_svg_graphics","z":"75cda3cc58138825","group":"453e380f41276a83","order":0,"width":"22","height":"12","svgString":"<div id=\"graphics\" ng-init=\"checkSVG()\">\n \n <!-- SVG FILE CONTENT BELOW -->\n \n <svg viewBox=\"-34.407 -107.482 1146.86 663.026\" width=\"1146.86\" height=\"663.026\">\n \n <g transform=\"matrix(1, 0, 0, 1, 244.467865, -45.879433)\" id=\"Zones@cx_hide\">\n \n <rect x=\"-240.527\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone8</title>\n </rect>\n \n <rect x=\"-104.527\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone7</title>\n </rect>\n \n <rect x=\"31.527\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone6</title>\n </rect>\n \n <rect x=\"167\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone5</title>\n </rect>\n \n <rect x=\"303\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone4</title>\n </rect>\n \n <rect x=\"439\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone3</title>\n </rect>\n \n <rect x=\"575\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone2</title>\n </rect>\n \n <rect x=\"711\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone1</title>\n </rect>\n </g>\n \n \n </svg>\n </div>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}","name":"","x":960,"y":720,"wires":[[]]},{"id":"4fafd51b57659e1b","type":"function","z":"75cda3cc58138825","name":"function 48","func":"// The input message contains your circles\nvar circles = msg.payload || [];\n\n// Remove all existing circles\nnode.send({\n payload: {\n command: \"remove_element\", \n selector: \"circle\"\n }\n})\n\nvar circleCount = circles.length;\n\nfor(var i=0; i<circleCount; i++) {\n var circle = circles[i];\n \n node.send({\n payload: [{\n command: \"add_element\", \n elementType: \"circle\",\n elementId: \"circle_\" + i,\n elementAttributes: {\n cx: circle.x,\n cy: circle.y,\n r: circle.radius,\n fill:circle.c1,\n stroke:circle.c2,\n title:\"blabla\",\n }\n },\n {\n command: \"add_element\",\n elementType: \"title\",\n elementId: \"title_\" + i,\n parentElementId: \"circle_\" + i,\n textContent: \"tooltip circle \" + i\n }]\n \n })\n}\n// Show the number of circles\nnode.send({\n payload: {\n command: \"update_text\",\n selector: \"#circle_count\",\n textContent: circleCount\n }\n})\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":720,"wires":[["a75ac852460b4d1e"]]},{"id":"1ac71b6f7f94c911","type":"inject","z":"75cda3cc58138825","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\t {\t \"x\": 96.886,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"##ff0000\"\t },\t {\t \"x\": 234.652,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 368.054,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 505.99,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 642.397,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 778.435,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t }\t]","payloadType":"jsonata","x":420,"y":720,"wires":[["4fafd51b57659e1b"]]},{"id":"453e380f41276a83","type":"ui_group","name":"testing","tab":"b85432d79dbc660a","order":1,"disp":true,"width":"22","collapse":false},{"id":"b85432d79dbc660a","type":"ui_tab","name":"ZONE MONITORING","icon":"dashboard","disabled":false,"hidden":false}]

```

This flow shows a _ **tooltip** _ when you hoover above a circle:

![tooltip demo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/6101f6b5d379c1caca2e38feb266f100bd052dab.gif)

So you could show your info in that tooltip. Note that you can also add newline characters to create a _ **multiline** _ tooltip:

```auto
textContent: "Parking number = " + i + "\nStatus: reserved\nType: normal\nPrice/hour: 1.5 EUR"

```

Which looks like this:

![multiline_tooltip](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/ef911882c02f5b5bba69883e8c27fa35d213114d.gif)

## Method 2 - Click event

Of course you can also add a click event to each circle:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/49af97e29b620065189ed0ea9939c965c50b08aa.png)

In this screenshot the [CSS selector](https://www.w3schools.com/cssref/css_selectors.asp) column contains "_circle_" which means the click event is triggered for every element of type "circle".

In the example flow, we add a debug node:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e564108f39946c542ebd706d92edf93bba524be3.png)

```auto
[{"id":"a75ac852460b4d1e","type":"ui_svg_graphics","z":"75cda3cc58138825","group":"453e380f41276a83","order":0,"width":"22","height":"12","svgString":"<div id=\"graphics\" ng-init=\"checkSVG()\">\n \n <!-- SVG FILE CONTENT BELOW -->\n \n <svg viewBox=\"-34.407 -107.482 1146.86 663.026\" width=\"1146.86\" height=\"663.026\">\n \n <g transform=\"matrix(1, 0, 0, 1, 244.467865, -45.879433)\" id=\"Zones@cx_hide\">\n \n <rect x=\"-240.527\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone8</title>\n </rect>\n \n <rect x=\"-104.527\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone7</title>\n </rect>\n \n <rect x=\"31.527\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone6</title>\n </rect>\n \n <rect x=\"167\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone5</title>\n </rect>\n \n <rect x=\"303\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone4</title>\n </rect>\n \n <rect x=\"439\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone3</title>\n </rect>\n \n <rect x=\"575\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone2</title>\n </rect>\n \n <rect x=\"711\" y=\"175.394\" width=\"118.523\" height=\"227.626\" style=\"fill-opacity: 0.44; fill: rgb(175, 238, 146);\">\n <title>Zone1</title>\n </rect>\n </g>\n \n \n </svg>\n </div>","clickableShapes":[{"targetId":"circle","action":"click","payload":"circle","payloadType":"str","topic":"clicked"}],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}","name":"","x":820,"y":720,"wires":[["a56bbbb17fec08b8"]]},{"id":"4fafd51b57659e1b","type":"function","z":"75cda3cc58138825","name":"function 48","func":"// The input message contains your circles\nvar circles = msg.payload || [];\n\n// Remove all existing circles\nnode.send({\n payload: {\n command: \"remove_element\", \n selector: \"circle\"\n }\n})\n\nvar circleCount = circles.length;\n\nfor(var i=0; i<circleCount; i++) {\n var circle = circles[i];\n \n node.send({\n payload: {\n command: \"add_element\", \n elementType: \"circle\",\n elementId: \"circle_\" + i,\n event:\"click\",\n elementAttributes: {\n cx: circle.x,\n cy: circle.y,\n r: circle.radius,\n fill:circle.c1,\n stroke:circle.c2,\n title:\"blabla\",\n }\n }\n \n })\n}\n// Show the number of circles\nnode.send({\n payload: {\n command: \"update_text\",\n selector: \"#circle_count\",\n textContent: circleCount\n }\n})\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":610,"y":720,"wires":[["a75ac852460b4d1e"]]},{"id":"1ac71b6f7f94c911","type":"inject","z":"75cda3cc58138825","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\t {\t \"x\": 96.886,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"##ff0000\"\t },\t {\t \"x\": 234.652,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 368.054,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 505.99,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 642.397,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t },\t {\t \"x\": 778.435,\t \"y\": 230,\t \"radius\": 30,\t \"c1\":\"#0026ff\",\t \"c2\":\"#ffd700\"\t }\t]","payloadType":"jsonata","x":420,"y":720,"wires":[["4fafd51b57659e1b"]]},{"id":"a56bbbb17fec08b8","type":"debug","z":"75cda3cc58138825","name":"debug 6","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1020,"y":720,"wires":[]},{"id":"453e380f41276a83","type":"ui_group","name":"testing","tab":"b85432d79dbc660a","order":1,"disp":true,"width":"22","collapse":false},{"id":"b85432d79dbc660a","type":"ui_tab","name":"ZONE MONITORING","icon":"dashboard","disabled":false,"hidden":false}]

```

When you hoover across a circle now, the cursor will become hand-shaped. When you click a circle, an output message will appear in your Debug panel:

![click_event](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/ebf338dd067014aff42f323cf27deba11e45d919.gif)

The output message contains your circle id, so you could now e.g. show a popup window via a ui template node or whatever. But I don't have any experience with that.

Good luck with it!

---

<div class="post-metadata">

### Author: ![node-to](https://avatars.discourse-cdn.com/v4/letter/n/8baadc/32.png) [@node-to](https://discourse.nodered.org/u/node-to)
#### Post date: [8 September 2022 04:19 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389/6 "2022-09-08T04:19:18Z")

</div>

Dear sir can we create popup when we click

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [8 September 2022 04:51 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389/7 "2022-09-08T04:51:42Z")

</div>

As you can read at the end of my post:

> [@BartButenaers](#):
>
> The output message contains your circle id, so you could now e.g. show a popup window via a ui template node or whatever. But I don't have any experience with that.

Did a quick search on this forum, and after one minute I found this:

> [@Looking for a text input dialog popup window similar to notification widget](https://discourse.nodered.org/t/looking-for-a-text-input-dialog-popup-window-similar-to-notification-widget/23838/2):
>
> Hi, this might not be exactly what you want but it might be a good starting point... Demo [popup\_dialog] Flow... [{"id":"18d52ef4.d18761","type":"ui\_button","z":"19edfd5e.e96e03","name":"","group":"6d01ec93.b1d374","order":0,"width":0,"height":0,"passthru":false,"label":"First name","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"topic\":\"first\_name\", \"title\":\"What is your first name?\", \"label\" : \"First Name\" }","payloadType":"json","topic":"show","x":150,"y":180,"wires"…

---

<div class="post-metadata">

### Author: ![node-to](https://avatars.discourse-cdn.com/v4/letter/n/8baadc/32.png) [@node-to](https://discourse.nodered.org/u/node-to)
#### Post date: [8 September 2022 12:42 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389/8 "2022-09-08T12:42:19Z")

</div>

thank you for yours's guidance,  
I will be looking more of your guidance in future.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [8 October 2022 12:42 UTC](https://discourse.nodered.org/t/how-to-add-tooltip-on-svg-circle/67389/9 "2022-10-08T12:42:56Z")

</div>

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