# Tooltip for SVG-graphic node?

**URL:** <https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720>\
**Category:** Dashboard\
**Created:** [26 May 2023 13:54 UTC](https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720 "2023-05-26T13:54:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![beg1nner](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@beg1nner](https://discourse.nodered.org/u/beg1nner)\
**Post date:** [26 May 2023 13:54 UTC](https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720/1 "2023-05-26T13:54:51Z")

</div>

Hi there,

is there a way to add a tooltip that appears when you hover over an element of the svg-graphic-node?  
As far as I know there is a tooltip for every button-, slider-, text-node and for the UI template.  
For me it is not possible to use the ui-template because I'd like to have the enlarge- and move-ability of the svg-node.

Thanks for help,  
your beg1nner

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 May 2023 14:18 UTC](https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720/2 "2023-05-26T14:18:57Z")

</div>

> [@beg1nner](#):
>
> is there a way to add a tooltip that appears when you hover over an element of the svg-graphic-node

SVG uses a `title` element for tooltips

```auto
<svg version="1.0" id="Layer_1"
	 width="250px" height="200px" viewBox="0 0 64 64" enable-background="0 33 64 64" xml:space="preserve">
  <title>Hello, title!</title>
  <rect x="1" y="12" fill="red" color="white" stroke="#000000" stroke-width="2" stroke-miterlimit="10" width="62" height="40">
  </rect>
  <text x="15" y="25" font-family="Verdana" font-size="7" fill="white">Hover me</text>
</svg>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/6761d265f5e0488179b3e06fd89c379b10cf7e4f.png)

---

<div class="post-metadata">

**Author:** ![beg1nner](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@beg1nner](https://discourse.nodered.org/u/beg1nner)\
**Post date:** [28 May 2023 08:13 UTC](https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720/3 "2023-05-28T08:13:03Z")

</div>

> [@Steve-Mcl](#):
>
> SVG uses a `title` element for tooltips

But I can't use a specific titel for a specific svg-object, can I?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [28 May 2023 09:16 UTC](https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720/4 "2023-05-28T09:16:19Z")

</div>

Have you tried?

What happens if you wrap a specific object in a group & add a title element?

---

<div class="post-metadata">

**Author:** ![beg1nner](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@beg1nner](https://discourse.nodered.org/u/beg1nner)\
**Post date:** [28 May 2023 16:54 UTC](https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720/5 "2023-05-28T16:54:36Z")

</div>

> [@Steve-Mcl](#):
>
> What happens if you wrap a specific object in a group & add a title element?

how to put them into a group?

---

<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:** [28 May 2023 21:13 UTC](https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720/6 "2023-05-28T21:13:46Z")

</div>

Look at the [group](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g) element.

---

<div class="post-metadata">

**Author:** ![beg1nner](https://avatars.discourse-cdn.com/v4/letter/b/d26b3c/32.png) [@beg1nner](https://discourse.nodered.org/u/beg1nner)\
**Post date:** [29 May 2023 12:29 UTC](https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720/7 "2023-05-29T12:29:31Z")

</div>

Alright. It works perfectly now. Thank you Stece-Mcl and BartButenaers.

---

<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:** [12 June 2023 12:29 UTC](https://discourse.nodered.org/t/tooltip-for-svg-graphic-node/78720/8 "2023-06-12T12:29:53Z")

</div>

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