LiveCode LessonsData GridData Grid Tips & Tricks TablesHow Do I Add Tooltips To Column Headers?

How Do I Add Tooltips To Column Headers?

Currently column headers in a data grid table do not have a tooltip property. You can still get tooltips to appear, however, by customizing the default behaviour script for column headers. This lesson will show you how.

Open Template Card For Data Grid Table

Open Template Card For Data Grid Table

Open the template card for the data grid table by clicking on the Row Template button in the property inspector.

Create Button For Custom Behaviour

Create Button For Custom Behavior

Drag a button onto the template card and name it My Header Behaviour.

Assign Script

Assign Script

Assign the script behaviour of the My Header Behaviour button to the script of button "Default Header" of stack "revDataGridLibrary":

set the script of the selobj to the script of the behavior of button "Default Header" of stack "revDatagridLibrary"

This ensures that your behaviour has the same basic behaviour that a column header should have.

Customize Script

Customize Script

Now edit the script of the My Header Behaviour button. You want to customize the dgColumn getProp.

Add a new line to the getProp:

set the tooltip of field 1 of me to SomeFunctionThatReturnsToolTip(short name of me)

In this example I'm calling a function that takes the name of the column (short name of me) as the first parameter. I'm going to define the function in the data grid group script.

Define Function That Returns Tooltip

Define Function That Returns Tooltip

Select your data grid and edit it's script. Define the SomeFunctionThatReturnsToolTip function to return a tooltip based on the column name passed in (remember to press "Apply").

function SomeFunctionThatReturnsToolTip pColumn
   switch pColumn
      case "col 1"
         return "A tooltip for column 1"
      case "col 2"
         return "A tooltip for column 2"
   end switch
end SomeFunctionThatReturnsToolTip

Assign "default header behavior" Property

To finish up you just need to assign the "default header behavior" property to the long id of the My Header Behaviour button, which is on a different stack, which requires getting the name of the stack:


This can be done by going onto the template stack, then typing into the Message Box:

put the name of this stack

Then insert the name of the stack in <stack name>:

set the dgProps["default header behavior"] of selobj() to the long id of button "My Header behaviour" of stack "<stack name>"

This tells the data grid to use the script of your button rather than the default script supplied with the data grid.

Add columns to Data Grid

Select the data grid (1), then select the 4th tab across (2), then finally add 2 columns using the + button (3).

Refresh Data Grid

Refresh Data Grid

While still in the property inspector, select the 2nd tab across (1), then select "Refresh Data Grid" (2).



Now when you roll over a column header the tooltip will appear.


Add your comment

E-Mail me when someone replies to this comment