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
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.
A little example how led's with tooltips can be made with the ui_template node .
[{"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}]
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
So something like this then maybe some kind of starting point.
[{"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}]
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 
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
