Tooltip in UI template

Dashboard
1

Hello,

I would like to have a tooltip that appears when the mouse is on a row of a table. The text of the tooltip is in row.description.

I have tried several solutions with hover but I have not managed to use it with ng-bind.
image
Here is a simplified example of the template.

[{"id":"a88f9b78.58b098","type":"inject","z":"e97b66ab.65ee18","name":"","topic":"","payload":"[{\"name\":\"Default_temperature\",\"value\":false,\"description\":\"this is a Description for Default_temperature\"},{\"name\":\"Default_pressure\",\"value\":true,\"description\":\"Description for Default_pressure\"},{\"name\":\"Default_humidity\",\"value\":true,\"description\":\"Description for Default_humidity\"},{\"name\":\"Default_temperature_high\",\"value\":false,\"description\":\"Description for Default_temperature_high\"},{\"name\":\"Default_temperature_low\",\"value\":true,\"description\":\"Description for Default_temperature_low\"},{\"name\":\"Default_other\",\"value\":false,\"description\":\"Description for other defaults\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":280,"wires":[["ebc6edce.1e071"]]},{"id":"ebc6edce.1e071","type":"ui_template","z":"e97b66ab.65ee18","group":"84b6ba09.b4ffd8","name":"UI template for default","order":2,"width":"7","height":"9","format":"<table id=\"Default\" border=\"1\">\n <tr>\n <th>Name</th> \n <th>Value</th>\n </tr>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\">\n <td>{{row.name}}</td>\n <td ng-bind=\"row.value\" style=\"{{row.value ? 'background-color:green' : 'background-color:red'}}\"></td>\n </tr>\n </tbody>\n</table>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":540,"y":280,"wires":[[]]},{"id":"84b6ba09.b4ffd8","type":"ui_group","z":"e97b66ab.65ee18","name":"Defaults","tab":"1c01cde.5f38e32","order":2,"disp":true,"width":"7","collapse":false},{"id":"1c01cde.5f38e32","type":"ui_tab","z":"e97b66ab.65ee18","name":"Defaults","icon":"warning","order":2,"disabled":false,"hidden":false}]

Thank you in advance for your help

Martin

2

Eureka!
I found the solution with Bootstrap Tooltip:
Hope it will help somebody!

Martin

[{"id":"a88f9b78.58b098","type":"inject","z":"e97b66ab.65ee18","name":"","topic":"","payload":"[{\"name\":\"Default_temperature\",\"value\":false,\"description\":\"this is a Description for Default_temperature\"},{\"name\":\"Default_pressure\",\"value\":true,\"description\":\"Description for Default_pressure\"},{\"name\":\"Default_humidity\",\"value\":true,\"description\":\"Description for Default_humidity\"},{\"name\":\"Default_temperature_high\",\"value\":false,\"description\":\"Description for Default_temperature_high\"},{\"name\":\"Default_temperature_low\",\"value\":true,\"description\":\"Description for Default_temperature_low\"},{\"name\":\"Default_other\",\"value\":false,\"description\":\"Description for other defaults\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":280,"wires":[["ebc6edce.1e071"]]},{"id":"ebc6edce.1e071","type":"ui_template","z":"e97b66ab.65ee18","group":"84b6ba09.b4ffd8","name":"UI template for default","order":2,"width":"7","height":"9","format":"<table id=\"Default\" border=\"1\">\n <tr>\n <th>Name</th> \n <th>Value</th>\n </tr>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\" data-toggle=\"tooltip\" data-placement=\"bottom\" title= {{row.description}}>\n <td>{{row.name}}</td>\n <td ng-bind=\"row.value\" style=\"{{row.value ? 'background-color:green' : 'background-color:red'}}\"></td>\n </tr>\n </tbody>\n</table>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":540,"y":280,"wires":[[]]},{"id":"84b6ba09.b4ffd8","type":"ui_group","z":"e97b66ab.65ee18","name":"Defaults","tab":"1c01cde.5f38e32","order":2,"disp":true,"width":"7","collapse":false},{"id":"1c01cde.5f38e32","type":"ui_tab","z":"e97b66ab.65ee18","name":"Defaults","icon":"warning","order":2,"disabled":false,"hidden":false}]

3

This is an HTML question more than a Node-RED one.

You can create a simple tooltip for all browsers by adding the title attribute to any tag. The text you provide to that attribute will appear as a tooltip.

Only if you need to do clever things like formatting, html content, etc do you need something like the bootstrap extension.

2 Likes