Tooltips not respecting png transparency

Game development with Board Game Arena Studio
Post Reply
User avatar
IndianaScones
Posts: 16
Joined: 07 June 2012, 07:04

Tooltips not respecting png transparency

Post 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?
User avatar
RicardoRix
Posts: 1811
Joined: 29 April 2012, 23:43

Re: Tooltips not respecting png transparency

Post by RicardoRix »

is it the tooltip itself that has the white background?
User avatar
IndianaScones
Posts: 16
Joined: 07 June 2012, 07:04

Re: Tooltips not respecting png transparency

Post 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.
User avatar
IndianaScones
Posts: 16
Joined: 07 June 2012, 07:04

Re: Tooltips not respecting png transparency

Post 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.
User avatar
Jonathan2004
Posts: 9
Joined: 21 April 2020, 19:06

Re: Tooltips not respecting png transparency

Post 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 ?
User avatar
IndianaScones
Posts: 16
Joined: 07 June 2012, 07:04

Re: Tooltips not respecting png transparency

Post 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!
Post Reply

Return to “Developers”