Cosmoteer Wiki talk:To-do List

Tooltips

Current tooltips have these issues:

• Disappears right after you unhover the text.
• Doesn't support formatting (or/and templates - needs reserach).
• Problems with setting custom width for large content.

A new tooltip should utilize things under control of maintainers, so it can be customized in any way.

Features that the new template should have:

• It should be possible to animate appearance and disappearance.
• Hoverable (so you can click and copy stuff inside it).
• Stackable with other tooltips, in case you put one tooltip inside another tooltip.
• Supports text align, max width override.
• Optionally supports picking a side at which the tooltip appears, maybe even a particular position (like 20 pixels from top on right side) - might be useful for big things?

Possible implementations:

▶ Next to the tooltip text, create an element with all the tooltip content inside. Disable its rendering. Use JS to display it on hover.

Main issue with this is what form the generated tooltip content will appear, since the element is generated right in the middle of the text. This might generate blocks layout instead of regular span.

This is the safest way so far, because all the input goes through the parser, and whatever tweaks you do would still be within the parser context. Needs testing.

▶ Write the tooltip content to a data attribute of the tooltip element, then generate the DOM based on it using JS.

This might be dangerous because of whatever goes in the data is a user input. All you have to do is to replace the data contents in the template with a malicious code and you've got yourself a XSS.

This needs researching as to whether it's possible to safely eval the DOM inside data. Needs researching.

▶ Generate the tooltip using Lua, binding it with the tooltip text element using some ID.

Lua might have some faculties in place that might help to do this safely. Needs researching.

A template system for calculating value deltas in percentages, straight numbers, etc.

Example is based on Auriga changelog
This change should introduce an ability to automatically calculate a difference between 2 values and display it in a formatted way (e.g. percentages, with up/down arrows and color for sign). This might be useful for changenotes where they are often changes in certain parameters. For large numbers in might be harp to grasp how much has changed. To be able to make calculations on values, they need to be somehow refereed to. One of the possible solution that I describe here is to:

1. Define two value variables.
2. Use them in calculations and to display as plain values.Lets take this change entry for example:

   Cost reduced to {{c|{{Resource|Credits}}{{fn|1612740}}}} from {{c|{{Resource|Credits}}{{fn|1616390}}}}
   

   One way to demonstrate the difference here would be using percentages (might be the worst way now that I look at it :/ ).

It can look something like this:

Cost reduced to {{c|v=1|{{Resource|Credits}}{{fn|1612740}}}} from {{c|v=2|{{Resource|Credits}}{{fn|1616390}}}} {{ValueDelta|in=number|out=percentage|from=v1|good=positive|label=false}}

To automatically calculate the percentage, we do this (this is not actual code, only a demo):

the result would on pic.

• v=1 and v=2 set in {{c}} set the first and second variables to use in calculation.for ValueDelta:

• in=number assumes the input values to be numbers. other values might include: percentage (e.g. 70% → 40%).
• out=percentage sets the output values to be percentages.
• from=v1 set the left operand in a subtraction to be the first value. i.e. it's the number from which the other value will be subtracted to calculate the delta. other value is v2 for second value.
• good=positive assumes that the positive delta is good change, marking it green. negative will mark it red.
• label=false disabled the label

---

if we want to instead replace the "reduced" with that percentage difference (i.e. putting it before the variables are defined), we need to move the variable definition from {{c}} blocks. First define the variables to use as values. Might be something like: {{v1|value}} {{v2|value}} or a single template instead. You then get the values from these variables (read from variables) in the calculation and in the plain values - just by calling a template {{v1}} {{v2}}:

{{v1|1612740}} {{v2|1616390}} Cost {{ValueDelta|in=number|out=percentage|from=v1|good=positive}} to {{c|{{Resource|Credits}}{{fn|{{v1}}}}}} from {{c|{{Resource|Credits}}{{fn|{{v2}}}}}}

This results in something like this:

---

This can also probably be used in other places like part stats.