Tooltips not respecting png transparency

[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?

[RicardoRix]

is it the tooltip itself that has the white background?

[IndianaScones]

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.

[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.

[Jonathan2004]

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 ?

[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!