htmlcsstooltipscreen-readershigh-contrast

Hide span with CSS but showing tooltip (has to work with high contrast and IE8)

i want to hide a span element containing a tooltip using the same color for font as for the background, so that it is visible to screenreaders and invisible on the page but if you hover over it, you can still see the tooltip (which does not work with display:none).

but this does not work, if you turn on high contrast on windows, as the text is shown.

how can this be accomplished? needs to work with IE 8 and without JS.

Thanks for your help!

<span title="vers_1.2.3.4" style="font-color:#000; background-color:#000">
Version
</span>

SOLUTION:

<span title="vers_1.2.3.4" style="font-color:#000; background-color:#000;">
 <p style="display:none">Version</p>
</span>
Solution

  • Try this fiddle, may be this is you want

    http://jsfiddle.net/8s1rbp65/2/

    <span title="vers_1.2.3.4" style="font-color:#FFF; background-color:#fff">
    <p>Version</p>
</span>

span p{
    color:transparent;
    border:1px solid #000;//this is to identify the text, remove this
}