Custom Tooltips in Dashboards
Clients always have the requirements for tooltips on the dashboard. While charting components have the default tooltip available, it is yet not a default functionality for a lot of components like images, buttons, labels, etc.
One of the methods of achieving the tooltip is using a transparent URL button. URL buttons have tooltips. Although this is a long known method, it has a major con – the tooltip font cannot be controlled, it is too tiny to be readable.
Another interesting but tedious way is to use a transparent Toggle component and a label. Let’s look at this approach.
- Select a push button, a toggle button and a label.
- Align the push button and the toggle button completely and make them “same size”.
- The toggle button should be on top of the push button and should completely align with it. Off course, it should be transparent.
- Place the label according to you convenience and enter the tooltip text in it.
- Go to the properties for Toggle button and set the Data insertion values.
- This destination will be driving the dynamic visibility of the label.
- Go to the Behaviour tab of the toggle button properties and set the insertion on “mouse over”. Selected item should be “off”.
- Now, set the dynamic visibility of the label component to the same cell as the toggle button destination.
Whenever the user hovers the mouse into the push button the tooltip (label) becomes visible and it goes away when the user hovers out of the push button. The aesthetics of the tooltip(label) can be controlled through the label component properties.