You could try something like this:
in getTooltipTokenContent(), at the end just before html += '</div>'; you can add a line with something like
Code: Select all
html += '<div class="square_tooltip" ____ to be completed with style background-position, depending on the location on the map of your token ____></div>';
It'll look better if you also add a <hr/> at the end of the html += "<div class='tooltip_content_desc'> ... line, just between </div> and ";
In CSS:
.square_tooltip {
background-image: url('img/tiles.jpg');
background-size: auto 2500%;
width: 75px; /* You can choose a smaller size if you want */
height: 75px; /* You can choose a smaller size if you want */
}
I don't remember (and don't have time to check now, maybe in 2 days) if tooltips are generated each time a client needs to display one (when hovering with the mouse), or if they're generated only in setup, when (re)loading the page.
In the latter case, the difficult thing is that the tokens are moving during the game, so you need to update the background position of your square_tooltip div (so you must give it an id including the token id).
tchobello wrote: ↑
If it wasn't hard enough, tiles can rotate...
Do you need the square displayed in the tooltip to be in the same orientation?
tchobello wrote: ↑
div square is used to place tokens and several decorations to show possible moves for instance.
Are the decorations visible? (above the tokens) Or do you need to also display them in the tooltip, not only the background image?
If things become difficult, you could try another approach, like adding a button in your interface that temporarily hides all tokens (style visibility: hidden)
