Tool Tips and Graphics

Tech
niagaraNX
Published in
4 min readJul 13, 2018

Tool tip’s allow you to add extra information when a user hovers their mouse over a widget.

Simple Example

The simplest tool tip is one that displays help or extra information regarding a widget on-screen.

Step 1

Open the kitPx palette and add a widget onto a graphic. In the Properties sidebar click the Add Binding button.

Select vykonPro:Tool Tip Binding and click OK.

Add Tool Tip Binding

Step 2

Even though we only want simple text to be displayed we still need to add an ORD. Click the ORD property in the Properties sidebar and select the object that contains the graphic in the component chooser.

Select ORD

Step 3

To change the tool tip text click the toolTip property and enter the required text.

Add Tool Tip Text

Now, when you hover your mouse over the widget a tool tip will appear.

Using live values

As well as static text you can also put the values of the points into a tool tip. In this example we have one NumericWritable that we are going to display the value of, and in the tool tip display more information about the point.

Point for Tool Tip

Step 1

Add a BoundLabel to a graphic and set its ORD property to the point you want.

Step 2

As before, in the Properties sidebar click the Add Binding button. Select vykonPro:Tool Tip Binding and click OK.

Select the ORD property and choose the point you want to get values from in the tool tip.

Select Point

Step 3

Click the toolTip property and enter the following text:

Value: %out.value%
Status: %status.flagsToString%
Input: %activeLevel%

Add BFormat Text

When you hover your mouse over the BoundLabel you will now see the the value of the point, its status and what priority level the point is getting its value from.

Tool Tip

Relative tool tips

As the tool tips use BFormat text strings, we can put information from multiple different points into one tool tip.

Software for Tool Tip

The screenshot above shows two folders with two points in them. In this example we are going to add a tool tip that displays the value of both points.

Step 1

Create a graphic and add two Label objects (from the bajaui palette). Give them appropriate text.

Step 2

In the Properties sidebar click the Add Binding button.

Select vykonPro:Tool Tip Binding and click OK.

Add Tool Tip Binding

Step 3

Select the folder that contains the points in the ORD property.

Select Folder

Step 4

Set the toolTip property to:

Temp: %Temp.out.value%
Valve: %Valve.out.value%

Notice, that because we chose the folder as the ORD we need to put the name of the point before out.value.

Step 5

Repeat the above step for the other folder (when selecting the ORD for the tool tip select the other folder).

Now when you hover your mouse over the text FCU1 or FCU2 you get the values of the points inside.

Final Tool Tip

--

--