Не работает как нужно всплывающая подсказка в IE
 

Привет!
есть проблема, нормально не отображается всплывающая подсказка в браузере IE

В хроме и опере все гуд! может кто подскажет как решить эту проблемку для браузера IE подсказка должна отобразится по центру так как в остальных браузерах

вод код хтмл вместе с css
править нужно в или добавить!
спасибо!
/* стиль появляющейся подсказки */

<style>

/* стиль текста, наведя или нажав на который появится пояснение */
.tooltip {

display: inline-block;
position: relative;
text-indent: 0px;
}

/* стиль появляющейся подсказки */
.tooltip > span {
position: absolute;
bottom: 100%;
left: -20em;
right: -20em;
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
text-align: center;
overflow: auto;
visibility: hidden;
margin: 0 auto .4em; /* поднята на .4em над текстом, наведя или нажав на который появится пояснение */
padding: .3em;
border-width:1px;
border-style:solid;
border-color:#E3E2E0;
background:#fdfdfd;
font-size: 10px;
color: #8a8888;
line-height: normal;
cursor: auto;
}

/* треугольничек под подсказкой; тут тоже везде .4em */
.tooltip:after {
content: "";
position: absolute;
top: -.3em;
left: 50%;
visibility: hidden;
margin: 0 0 0 -.2em;
border: .3em solid;
border-color: #E3E2E0 transparent transparent transparent;
cursor: auto;
}

.tooltip:hover > span,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus > span,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
transition: 0s .4s;
}



</style>




<br>
<br>
<br>
<br>
<br>
<span class="tooltip" tabindex="0">Просто текст<span>здесь подсказка что всплывет вверху и четко по центру</span></span>

В IE 11 и хроме последней версии выглядит практически одинаково

у меня 11 верс. ИЕ ися подсказка по центру! в нем не выглятет так как во всех, а сьезжает в лево, а должно отображат

Так пишут разве?

Rise, и для чего? В чём суть?

Rise, это то понятно, просто не понимаю, почему бы просто не написать transition-delay: .4s, так и код сразу понятнее станет.