html - Need help to resolve IE 8 z-index tooltip -

html - Need help to resolve IE 8 z-index tooltip -

my code works ff, chrome no in ie. problem bottom links beingness shown on multiple lines within tool-tip.

this code (no additional css) css:

css file

.hint,[data-hint] { position: relative; display: inline-block;} .hint:before,.hint:after,[data-hint]:before,[data-hint]:after { position: absolute; visibility: hidden; opacity: 0; z-index: 100000; pointer-events: none;} .hint:hover:before,.hint:hover:after,.hint:focus:before,.hint:focus:after,[data-hint]:hover:before,[data-hint]:hover:after,[data-hint]:focus:before,[data-hint]:focus:after { visibility: visible; opacity: 1;} .hint:before,[data-hint]:before { content: ''; position: absolute; background: transparent; border: 6px solid transparent; z-index: 100001;} .hint:after, [data-hint]:after { content: attr(data-hint); background: #ffffff !important; color: #fff; padding: 8px 10px; font-size: 12px; line-height: 12px; width: 200px; white-space: pre-wrap; line-height:1.3em; text-align:center; } .hint--bottom:before { margin-top: -12px; } .hint--bottom:after { margin-left: -18px; } .hint--bottom:before, .hint--bottom:after { top: 100%; left: 15px;} .hint--info:after { color:#5b5957!important; border:1px solid #335088; -webkit-box-shadow: 0px 10px 20px 0px rgba(97,97,97,0.7); -moz-box-shadow: 0px 10px 20px 0px rgba(97,97,97,0.7); box-shadow: 0px 10px 20px 0px rgba(97,97,97,0.7); } .hint--info.hint--top:before { border-top-color: #335088; } .hint--info.hint--bottom:before { border-bottom-color: #335088; } .hint--info.hint--left:before { border-left-color: #335088; } .hint--info.hint--right:before { border-right-color: #335088; }

and html is:

<ul> <li>features</li> <li><a href="#" class="hint--bottom hint--info" data-hint="test test test test test test test test test test">updates</a></li> <li>features</li> <li><a href="#" class="hint--bottom hint--info" data-hint="awdawd">examples</a></li> <li><a href="#" class="hint--bottom hint--info" data-hint="awdawd">products</a></li> </ul>

see market reddish image https://cloud.githubusercontent.com/assets/9686181/5025627/7e889594-6b23-11e4-9c95-89016aa0b29f.png

ok, issue having there known issues z-index on ie8 (launched in 2009).

the bug study here

so firstly advice upgrade browser ie 8 has low market-share of browsers statistics ie8.

the workaround

from info have found, if simple alter z-index values 10000 -> 10001. going between 10001 -> 10002 solve problem.

thankfully not have ie 8, , browserstack business relationship playing unfortunately can not verify fix. should give plenty information

html css css3 tooltip