Показать сообщение отдельно
  #1 (permalink)  
Старый 20.11.2015, 16:17
Кандидат Javascript-наук
Отправить личное сообщение для sergofedor06 Посмотреть профиль Найти все сообщения от sergofedor06
 
Регистрация: 10.11.2015
Сообщений: 131

Не работает как нужно всплывающая подсказка в 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>
Ответить с цитированием