The Arrows are not visible in IE8

[dev-bjoern]

It seems, that IE8 has some problem with rendering pseudoelements(the arrows) of elements that are inserted by javascript...

A possible solution is documented here: http://stackoverflow.com/a/8852418/228450

[dev-bjoern]

Alright, I just tested the proposed solution and it works :).

So to be more clear, you just have to give
#powerTip:before {
content: "x"
}

and all the other id selectors
content: "xx"

Substitue one x for one space, it wont show correctly here.

[stevenbenner]

How can I reproduce this problem?

I'll admit that I test IE8 support by setting IE10 to "IE8 mode", but I don't have any problem seeing the arrows. It is possible that there are some issues that may require a real IE8 install to test.

[dev-bjoern]

Its visible in a "real" IE8 e.g. in the "Placement examples" on the project site http://stevenbenner.github.io/jquery-powertip/
Just hover over one of the divs, you´ll see the arrow is missing in IE8. I use a local virtual machine, but you could glimpse via https://www.browserstack.com/users/sign_up trial.

[stevenbenner]

I downloaded the IE8 testing VM environment from Microsoft and am seeing exactly the same problem as you.

The fix does work, but it is really ugly. I want to dig a little deeper and see if I can find any other alternative solutions.

[stevenbenner]

I've finally had a chance to revisit this issue. I think I've found a better way to force IE8 to repaint the arrows without adding 12 more CSS rules with the unique repeated spaces hack.

If I set the CSS content to use attr(class) it does seem to force IE8 to redraw the pseudo elements every time. Luckily IE8 does support the attr function. It's hacky, but doesn't bloat the CSS nearly as much.

So in the end the CSS I'm looking at is this:

#powerTip:before {
    content: attr(class) " ";
    position: absolute;
    height: 0;
    width: 0;
    text-indent: 100%;
    overflow: hidden;
}

This adds the current class (which tooltips with arrows will always have) as content text, then hides that text by indenting it into the overflow region.

If anyone with an IE8 testing box sees this comment please try it out and let me know if it works for you. Right now I just have my IE8 virtual machine and it seems to resolve the issue.

[stevenbenner]

This should be resolved, or at least hopefully improved by commit 2ca0cd1.