Page 1 of 1
Tooltips not respecting png transparency
Posted: 19 January 2023, 23:27
by IndianaScones
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:
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>
the element in css:
Code: Select all
.shared_objective {
width: 70px;
height: 70px;
position: absolute;
background-image: url('img/summit_objectives.png');
background-size: 400% 800%;
}
the tooltip implementation in js:
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)
}
Can anyone see a reason why it wouldn't respect transparency?
Re: Tooltips not respecting png transparency
Posted: 19 January 2023, 23:33
by RicardoRix
is it the tooltip itself that has the white background?
Re: Tooltips not respecting png transparency
Posted: 20 January 2023, 00:43
by IndianaScones
RicardoRix wrote: ↑19 January 2023, 23:33
is it the tooltip itself that has the white background?
Interesting, I never considered that. I certainly didn't give it any such properties, but perhaps it is white by default. I'll see if it's some property that I can overwrite.
Re: Tooltips not respecting png transparency
Posted: 20 January 2023, 01:27
by IndianaScones
Ok while admittedly it was a bit of a dumb question and of course all tooltips have a white background and I might not want to get rid of it because the tooltip will need to have translatable text in addition to the enlarged picture.
All that said, if anyone happens to know how to get rid of the whitespace, it might come in handy in the future.
Re: Tooltips not respecting png transparency
Posted: 20 January 2023, 18:17
by Jonathan2004
IndianaScones wrote: ↑20 January 2023, 01:27
Ok while admittedly it was a bit of a dumb question and of course all tooltips have a white background and I might not want to get rid of it because the tooltip will need to have translatable text in addition to the enlarged picture.
All that said, if anyone happens to know how to get rid of the whitespace, it might come in handy in the future.
Okay this is today's case study :
Analyze:
- dojo tootilp generates the element ".dijitTooltipContainer" with a css giving background and border
- I tried to use some css selector like ".dijitTooltipContainer:has(>.midSizeDialog>.shared_objective)" to modify the parent of the generated tooltip zone, but css has() is not supported in my FF
.
- we can modify javascript generation of tooltip in framework or at least add this piece of code :
CSS
Code: Select all
.transparentToolTip>.dijitTooltipContainer {
background: none !important;
border: none !important;
}
JS in the end of your loop (after creation of tooltip in memory):
based upon framework source of addTooltipHtml()
Code: Select all
!this.bHideTooltips && (this.tooltips[`shared_objective${i+1}`].onShow = e.hitch(this.tooltips[`shared_objective${i+1}`], (function () {
dojo.addClass("dijit__MasterTooltip_0",'transparentToolTip');
}))
);
What do you think ?
Re: Tooltips not respecting png transparency
Posted: 24 January 2023, 18:59
by IndianaScones
Okay this is today's case study :
Analyze:
- dojo tootilp generates the element ".dijitTooltipContainer" with a css giving background and border
- I tried to use some css selector like ".dijitTooltipContainer:has(>.midSizeDialog>.shared_objective)" to modify the parent of the generated tooltip zone, but css has() is not supported in my FF
.
- we can modify javascript generation of tooltip in framework or at least add this piece of code :
CSS
Code: Select all
.transparentToolTip>.dijitTooltipContainer {
background: none !important;
border: none !important;
}
JS in the end of your loop (after creation of tooltip in memory):
based upon framework source of addTooltipHtml()
Code: Select all
!this.bHideTooltips && (this.tooltips[`shared_objective${i+1}`].onShow = e.hitch(this.tooltips[`shared_objective${i+1}`], (function () {
dojo.addClass("dijit__MasterTooltip_0",'transparentToolTip');
}))
);
What do you think ?
I don't have any experience with dijit beyond seeing it mentioned in the documentation, but that's interesting. I'd been wondering how to get at those tooltip properties. I haven't even figured out how to find them in dev tools. I hope I'll find a reason to try that solution out!