I'm working on attaching a tooltip to a token, that is simply an enlarged version of the token and I'm having a problem with lack of transparency. The token is from a png spritesheet. It's a circular token, and while the element on the board respects transparency and shows only the token, the tooltip has white filling the space around the token.
What it looks like:
https://imgur.com/a/fc9qy7a
The original element in tpl:
the element in css:
the tooltip implementation in js:
Can anyone see a reason why it wouldn't respect transparency?
What it looks like:
https://imgur.com/a/fc9qy7a
The original element in tpl:
Code: Select all
<div id="shared_objectives">
<!-- BEGIN shared_objective -->
<div id="shared_objective{id}" class="shared_objective" style="background-position: -{soX}% -{soY}%; top: {TOP}px; left: {LEFT}px;"></div>
<!-- END shared_objective -->
</div>
Code: Select all
.shared_objective {
width: 70px;
height: 70px;
position: absolute;
background-image: url('img/summit_objectives.png');
background-size: 400% 800%;
}
Code: Select all
for (i=0; i<=2; i++) {
console.log(`gamedatas.shared_objectives[i] = ${gamedatas.shared_objectives[i]}`);
let current_objective = gamedatas.shared_objectives[i];
let html = `<div class="shared_objective" style="height: 140px; width: 140px; background-position: -300% -500%; position: static;"></div>`;
this.addTooltipHtml(`shared_objective${i+1}`, html)
}