Board Game Arena

Posted: **13 May 2021, 11:25**

Hello.

I managed to add tooltip for my card game (Riftforce).
Actually it is only a bigger image of the card but I plan to improve it with translation of the description on it.

But, I am facing strange behaviour.
First here is my code.
In tpl :

Code: Select all

var jstpl_guild_tooltip = '<div class="card-guild card-tooltip guild_${guildName}"></div>';

In css :

Code: Select all

.card-guild {
    background-image: url('img/GuildSummoners.png');
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 1100% 100%;
    position: absolute;
    justify-self: center;
}
.card-tooltip {
    width:320px;
    height:447px;
    border-radius: 18px;
}
.guild_fire{background-position: 0% 0%;}

In JS :

Code: Select all

this.addTooltipHtml( 'guild_' + guildId, this.format_block('jstpl_guild_tooltip', {
                'guildName' : guildName.toLowerCase(),
            }));

What is happening :

A strange "graphic artefact" is appearing in the upper left corner https://imgur.com/a/kw6qCm5
Sometimes the tooltip does not appear and the card is "hover-blinking" with this CSS class (the card have it too, by design). When this happens, I cannot clic on card to select it (and trigger an action)

Code: Select all

.card-possible-selection {
    cursor: pointer;
}
.card-possible-selection:hover {
    transform: scale(1.1);
    z-index: 100; 
}

Do you have any clue/explanation for these behaviors ?

Posted: **13 May 2021, 11:51**

Remove position absolute, It breaks the layout and the tooltip has 0 width and height. That's actually the "Glitch" you are reffering to, an empty tooltip.

Posted: **13 May 2021, 17:12**

It is working, Master

Solved also another problem : the tooltip hiding the card

Posted: **13 May 2021, 17:37**

And how can I detect if a card have tooltiphtml ?

Board Game Arena

Advise needed on Tooltips

Advise needed on Tooltips

Re: Advise needed on Tooltips

Re: Advise needed on Tooltips

Re: Advise needed on Tooltips