# Tool tip on ui-led node

**URL:** <https://discourse.nodered.org/t/tool-tip-on-ui-led-node/63613>\
**Category:** Dashboard\
**Created:** [8 June 2022 11:08 UTC](https://discourse.nodered.org/t/tool-tip-on-ui-led-node/63613 "2022-06-08T11:08:37Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [8 June 2022 11:08 UTC](https://discourse.nodered.org/t/tool-tip-on-ui-led-node/63613/1 "2022-06-08T11:08:38Z")

</div>

Is there a way I can have a tooltip for an led I have on the dashboard? I know it has a text in the node itself. But due to space constraint on my dashboard and number of LEDs I have, I'd like to have tool tip when I hover.

any suggestions?  
TIA

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [8 June 2022 12:31 UTC](https://discourse.nodered.org/t/tool-tip-on-ui-led-node/63613/2 "2022-06-08T12:31:12Z")

</div>

No way to do it with that node (ui-led): it simply doesn't include this feature. But maybe you can manage with your CSS and a ui\_template node to add the tooltip.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [8 June 2022 15:31 UTC](https://discourse.nodered.org/t/tool-tip-on-ui-led-node/63613/3 "2022-06-08T15:31:13Z")

</div>

A little example how led's with tooltips can be made with the `ui_template` node .

```auto
[{"id":"7cba01dda10f670a","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"Red led","order":11,"width":"1","height":"1","format":"<div class=\"led red\" data-tooltip=\"Red Led\"></div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"led-container","x":660,"y":1300,"wires":[[]]},{"id":"ebb5f1d239c7b697","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"CSS","order":12,"width":0,"height":0,"format":"<style>\n .led-container{\n overflow:visible;\n align-items: center;\n justify-content: center;\n }\n .led {\n border-radius: 2em;\n width: 1em;\n height: 1em;\n }\n\n .red {\n background-color: red;\n }\n\n .green {\n background-color: green;\n }\n\n [data-tooltip]::before {\n content: attr(data-tooltip);\n position: absolute; \n display: block;\n background: var(--nr-dashboard-widgetBackgroundColor);\n padding: 10px;\n top: 0px;\n left: 2.5em;\n box-shadow: 0px 2px 5px #0000008c;\n border-radius: 3px;\n text-align: center;\n white-space: nowrap; \n z-index: 1;\n opacity: 0;\n pointer-events: none;\n transform: translateY(5px);\n transition: all .3s cubic-bezier(.4, 0, .2, 1);\n }\n\n [data-tooltip]:hover::before {\n transform: translate(0);\n opacity: 1;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":650,"y":1240,"wires":[[]]},{"id":"7738dcea5490dab0","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"Green led","order":11,"width":"1","height":"1","format":"<div class=\"led green\" data-tooltip=\"Green Led\"></div>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"led-container","x":660,"y":1340,"wires":[[]]},{"id":"f6124e036e2d2ffb","type":"ui_group","name":"Default","tab":"34ab7d39f3e308fc","order":1,"disp":true,"width":"5","collapse":false,"className":""},{"id":"34ab7d39f3e308fc","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [9 June 2022 11:13 UTC](https://discourse.nodered.org/t/tool-tip-on-ui-led-node/63613/4 "2022-06-09T11:13:00Z")

</div>

That's nice !  
But i have something that looks like this.  
Each LED has 3 states but i need the same tooltip for a specific LED

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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 June 2022 12:42 UTC](https://discourse.nodered.org/t/tool-tip-on-ui-led-node/63613/5 "2022-06-09T12:42:18Z")

</div>

So something like this then maybe some kind of starting point.

```auto
[{"id":"ebb5f1d239c7b697","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"CSS","order":12,"width":0,"height":0,"format":"<style>\n --root{\n led-color:120deg;\n }\n .led-container{ \n overflow: visible;\n align-items: center;\n flex-direction: row;\n align-content: center;\n justify-content: space-between;\n }\n .led {\n border-radius: 2em;\n width: 1em;\n height: 1em;\n box-shadow: 0 0 6px 3px hwb(var(--ledcolor) 0% 49%), inset 0px -5px 6px -3px hsl(var(--ledcolor) 100% 30%);\n \n }\n\n .red {\n --ledcolor:360deg;\n background-color: hsl(var(--ledcolor) 100% 50%); \n }\n\n .green {\n --ledcolor:120deg;\n background-color: hsl(var(--ledcolor) 100% 50%); \n }\n .yellow {\n --ledcolor:50deg;\n background-color: hsl(var(--ledcolor) 100% 50%);\n }\n\n .off {\n background-color: hsl(var(--ledcolor) 100% 15%);\n box-shadow: 0 0 13px 0px hwb(var(--ledcolor) 9% 82%), inset 0px 4px 6px 0px hsl(var(--ledcolor) 65% 25%);\n }\n\n [data-tooltip]::before {\n content: attr(data-tooltip);\n position: relative;\n background: var(--nr-dashboard-widgetBackgroundColor);\n padding: 10px;\n top: 0px;\n left: 2em;\n box-shadow: 0px 2px 5px #0000008c;\n border-radius: 3px;\n text-align: center;\n white-space: nowrap; \n z-index: 1000;\n opacity: 0;\n pointer-events: none;\n transform: translateY(5px);\n transition: all .3s cubic-bezier(.4, 0, .2, 1);\n }\n\n [data-tooltip]:hover::before {\n transform: translate(0);\n opacity: 1;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":590,"y":1180,"wires":[[]]},{"id":"7738dcea5490dab0","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"led stripe","order":11,"width":"5","height":"1","format":"<div id=\"{{'led_'+$id+'_1'}}\" class=\"led green off\" data-tooltip=\"Led 1\"></div>\n<div id=\"{{'led_'+$id+'_2'}}\" class=\"led green off\" data-tooltip=\"Led 2\"></div>\n<div id=\"{{'led_'+$id+'_3'}}\" class=\"led green off\" data-tooltip=\"Led 3\"></div>\n<div id=\"{{'led_'+$id+'_4'}}\" class=\"led green off\" data-tooltip=\"Led 4\"></div>\n<div id=\"{{'led_'+$id+'_5'}}\" class=\"led green off\" data-tooltip=\"Led 5\"></div>\n<div id=\"{{'led_'+$id+'_6'}}\" class=\"led green off\" data-tooltip=\"Led 6\"></div>\n<div id=\"{{'led_'+$id+'_7'}}\" class=\"led green off\" data-tooltip=\"Led 7\"></div>\n<div id=\"{{'led_'+$id+'_8'}}\" class=\"led green off\" data-tooltip=\"Led 8\"></div>\n<div id=\"{{'led_'+$id+'_9'}}\" class=\"led green off\" data-tooltip=\"Led 9\"></div>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) { \n msg.payload.forEach(led => {\n if(led.off){\n $(\"#led_\"+scope.$id+\"_\"+led.index).attr('class','led '+led.color+' off');\n }\n else{\n $(\"#led_\"+scope.$id+\"_\"+led.index).attr('class','led '+led.color);\n }\n \n }) // Do something when msg arrives\n \n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"led-container","x":720,"y":1280,"wires":[[]]},{"id":"a3ebef90e5407636","type":"inject","z":"9141c3fbcc7d9e2b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"index\":1,\"color\":\"yellow\"},{\"index\":2,\"color\":\"red\"},{\"index\":5,\"color\":\"yellow\"}]","payloadType":"json","x":570,"y":1240,"wires":[["7738dcea5490dab0"]]},{"id":"daed0e4a870eb0f9","type":"inject","z":"9141c3fbcc7d9e2b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"index\":1,\"color\":\"green\"},{\"index\":3,\"color\":\"green\"},{\"index\":7,\"color\":\"red\"},{\"index\":4,\"color\":\"yellow\",\"off\":true}]","payloadType":"json","x":570,"y":1280,"wires":[["7738dcea5490dab0"]]},{"id":"f3ebf334cceccde6","type":"inject","z":"9141c3fbcc7d9e2b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"index\":3,\"color\":\"red\"},{\"index\":7,\"color\":\"green\"},{\"index\":4,\"color\":\"yellow\",\"off\":true}]","payloadType":"json","x":570,"y":1320,"wires":[["7738dcea5490dab0"]]},{"id":"f6124e036e2d2ffb","type":"ui_group","name":"Default","tab":"34ab7d39f3e308fc","order":1,"disp":true,"width":"5","collapse":false,"className":""},{"id":"34ab7d39f3e308fc","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [9 June 2022 13:10 UTC](https://discourse.nodered.org/t/tool-tip-on-ui-led-node/63613/6 "2022-06-09T13:10:31Z")

</div>

Okay, this might work. I will try this out and get back to you !  
I am currently using the ui-led node red package. I guess i need to remove that and try to implement your flow instead  
Thanks a lot for your help 🙂

---

<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:** [23 June 2022 13:10 UTC](https://discourse.nodered.org/t/tool-tip-on-ui-led-node/63613/7 "2022-06-23T13:10:47Z")

</div>

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