Tooltips - MSUTeam/MSU GitHub Wiki

• Description
• System Functions
• Tooltip
• JavaScript
• Example

This system allows for easy adding and managing of tooltips for UI elements.
Without this system, a modder needed to hook certain vanilla tooltip functions to check for the presence of certain tooltip IDs. It was generally tedious to set up and manage.
With this system, you just pass a table that reflects a certain logical structure.
Each endpoint of the table is a tooltip class instance that allows for features such as dynamic content.
On the UI side, you pass an ID that corresponds to this structure.

Functions inside of <Mod>.Tooltips

<Mod>.Tooltips.setTooltips(_tooltipTable);

Sets a tooltip table to be used by the JS side. See the Example

<Mod>.Tooltips.getTooltip( _identifier )

Returns the Tooltip with the id _identifier within your mod. The id refers to the table structure, so it is the same as indexing the table.

A tooltip is a new class that is used to generate the UI values of the UI element tooltip. It is able to hold data such as strings for title and text, functions to generate title and text, and extra data that can be used to compute the UI elements.

A basic tooltip consisting of a title and text.

constructor( _title, _text, _data = null )
{
    this.setTitle(_title);
    this.setText(_text);
    base.constructor(_data);
}

_title and _text can be either strings or functions. They are used to create the title and the text of the element. If they are functions, the data of the js tooltip will be passed to it, see Example.

_data is an extra data table that can be passed, to also be used in the generating functions. It will be stored within the Data key, as in tooltip.Data.myExtraData This is not to be confused with the _data that is passed from js.

    getUIData( _data )

Returns the UI data, consisting of _title and _text of the constructor. _data refers to the JS tooltip element data, and will be passed to the generating functions. Don't worry, you can still pass strings as _title or _text.

A custom tooltip that generates the UI data via a function

constructor( _function, _data = null )
{
    this.setFunction(_function);
    base.constructor(_data);
}

_function must be a function. It is used to generate the UI data of the element. Thus, it must return a table consisting of the necessary UI data required by the js tooltip.

    getUIData( _data )

Returns the _function from the constructor, passing the js UI element data.

At this point, there are no special functions to be used to use the system in JS. Thus, you still bind a tooltip by using bindTooltip.
There are still some things to consider, though.
The contentType of the tooltip needs to be msu-generic.
There needs to be a modId key that corresponds to the MSU/modhooks id of your mod, such as mod_msu.
The elementId needs to refer to the structure of the table passed by setTooltips.
Any extra key:value pairs that you want to use in the tooltip will also be passed here.

Example data:

local myTooltips = {
    MyScreen = {
        MyOKButton = ::MSU.Class.BasicTooltip("OK", "An OK button"),
        MyCancelButton = ::MSU.Class.BasicTooltip("Cancel", function(){
            return ("I randomed this number : " + ::Math.rand(1, 2))
        }),
        MyAbortButton = ::MSU.Class.BasicTooltip("Abort", function(){
            return this.Data.AbortText
        }, {AbortText = "ABORT!!!"}),
    }
    MyOtherElement = {
        MyElementWithJSData = ::MSU.Class.BasicTooltip("Color", function(_data){
            return ("The color is : " + _data.color)
        }),
        MyTotallyDynamicElement = ::MSU.Class.CustomTooltip(function(_data){
            return ::<Mod>.getSomeUIData();
        }),
        My = {
            Very = {
                Nested = {
                    Element = ::MSU.Class.BasicTooltip("I", "am the deepest")
                }
            }
        }
    }
}

Passing this table:

<Mod>.Tooltips.setTooltips(myTooltips)

Using the table in js:

this.mMyOKButton.bindTooltip({ contentType: 'msu-generic', modId: "mod_myCoolMod", elementId: "MyScreen.MyOKButton"});
this.mMyCancelButton.bindTooltip({ contentType: 'msu-generic', modId: "mod_myCoolMod", elementId: "MyScreen.MyCancelButton"});
this.MyAbortButton.bindTooltip({ contentType: 'msu-generic', modId: "mod_myCoolMod", elementId: "MyScreen.MyAbortButton"});
...
this.mMyElementWithJSData.bindTooltip({ contentType: 'msu-generic', modId: "mod_myCoolMod", elementId: "MyOtherElement.MyElementWithJSData", color:"red"});
this.mMyTotallyDynamicElement.bindTooltip({ contentType: 'msu-generic', modId: "mod_myCoolMod", elementId: "MyOtherElement.MyTotallyDynamicElement"});
this.mMyNestedElement.bindTooltip({ contentType: 'msu-generic', modId: "mod_myCoolMod", elementId: "MyOtherElement.My.Very.Nested.Element"});