How to add tooltip on svg circle

[node-to]

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.

here is flow:

[
    {
        "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
    }
]

[mudwalker]

If you read these instructions 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.

[BartButenaers]

@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 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

[node-to]

sorry sir I am not able to add title

[BartButenaers]

@node-to,

Method 1 - tooltips

I have quickly updated your example:

[{"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:

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

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

Which looks like this:

Method 2 - Click event

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

In this screenshot the CSS selector 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:

[{"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:

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!

[node-to]

Dear sir can we create popup when we click

[BartButenaers]

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

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"…

[node-to]

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