Tooltips - MSUTeam/MSU GitHub Wiki
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"});