CODEWITHSUNDEEP
htmlcss
MJ P
MJ P

Reputation: 11

Formatting <span> title leaves original default title still displayed

I'm dynamically generating cards for a board game and for the sake of brevity on-screen I want all of the extra rules captions to only be displayed when the rule keyword is hovered over. I'm trying to avoid nested div tags here for a few behind-the-scenes reasons.

I have the alternate text setup with tags (shorted here with '...'):

<span title="Beasts of Nurgle secrete a Slime Trail ... "><b>Slime Trail</b></span>

and above, in the style section, I have:

    [title]:hover:after {
    position: absolute;
    content: attr(title);
    background-image: url('images/spanbg.jpg');
    padding: 5px;
    width: 250px;
    border-radius: 8px;
    border: 2px solid;
    z-index: 100;
    }

Initially when I hover over the text I get the title text formatted as desired, but a second later if the mouse cursor stays there I also get the default formatting for title show up on top (see attached image). The attached image shows what the initial display looks like before hovering for the extra second... with the unappealing and unformatted second copy of the title I can't seem to get rid of.

Weird second title text from formatted title

Anyone have suggestions how to get just the formatted title text that shows up for the span element without the additional default one? I'm not sure it's needed, but this is hosted on a node.js server being served via proxy from apache2 on the same host, and the behaviour has been confirmed in the latest version of Chrome and Firefox.

Upvotes: 1

Views: 250

Answers (1)

Lionel Rowe
Lionel Rowe

Reputation: 5926

I don't believe there's any way of disabling the browser's default behavior for title. To get around this, you could use the aria-label attribute, instead:

<span aria-label="Beasts of Nurgle ... "><b>Slime Trail</b></span>

[title]:hover:after {
    /* ... */
    content: attr(aria-label);
    /* ... */
}

Upvotes: 1

Related Questions