# Tooltip in UI template

**URL:** <https://discourse.nodered.org/t/tooltip-in-ui-template/12180>\
**Category:** Dashboard\
**Created:** [13 June 2019 11:50 UTC](https://discourse.nodered.org/t/tooltip-in-ui-template/12180 "2019-06-13T11:50:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mdresf](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@mdresf](https://discourse.nodered.org/u/mdresf)\
**Post date:** [13 June 2019 11:50 UTC](https://discourse.nodered.org/t/tooltip-in-ui-template/12180/1 "2019-06-13T11:50:22Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9010870b177250d7d240c85cc6698302b116eb94.png)  
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

---

<div class="post-metadata">

**Author:** ![mdresf](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@mdresf](https://discourse.nodered.org/u/mdresf)\
**Post date:** [13 June 2019 14:02 UTC](https://discourse.nodered.org/t/tooltip-in-ui-template/12180/2 "2019-06-13T14:02:30Z")

</div>

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}]`

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [15 June 2019 13:21 UTC](https://discourse.nodered.org/t/tooltip-in-ui-template/12180/3 "2019-06-15T13:21:26Z")

</div>

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.