How does addTooltipHtml work?

[Ginso]

Hello,
can anyone show me an example how addTooltipHtml works? The docs aren't very helpful...
Do i have to pass a html string or a DOM-Element to it?
If the latter, do i have to put that element anywhere or will the scriptt add it to the game?

[paramesis]

You would pass an HTML string.

Generally if the docs don't give a good example, you can find one by getting readonly access to another project that makes use of that feature.
Off the top of my head, La Granja, Madeira, and Dice Forge use html tooltips.

[Tisaac]

As paramesis said, it's taking an html string just as dojo.place
In particular, you can use this.format to create the content using js templates

[docthib]

Code: Select all

// in the .tpl file
var jstpl_tooltip_title = '<div class="tooltip-container"><h3>${title}</h3>${text}</div>';

// in the js file - in the setup
// let's say I want to add tooltips on my "cities" elements
for (var cityKey in gamedatas.cities) {
    var cityData = gamedatas.cities[cityKey];
    var $el = document.getElementById('city_' + cityData.id);
    
    this.addTooltipHtml($el.id, this.format_block('jstpl_tooltip_title', {
        title: cityData.name,
        text: cityData.tooltip,
    }));
}

// in the material.inc.php which will send this data to JS gamedatas through PHP getAllData()
$this->cities = [
    'startcity' => [
        'name' => clienttranslate('Start City'),
        'id' => 1,
        'tooltip' => clienttranslate('<b>Immediate:</b> Gain 6$<br><b>End of game:</b>Lose 6 VP'),
    ],
    (...)
];

EDIT: I would advice not using HTML tags in the clienttranslate thing but it was easier for me in a first place