Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.11.2015, 16:20   #1
nikolokaputik80
Пользователь
 
Регистрация: 30.09.2015
Сообщений: 74
По умолчанию Не работает как нужно всплывающая подсказка в IE

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

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

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



Код HTML:
<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>
nikolokaputik80 вне форума Ответить с цитированием
Старый 20.11.2015, 17:40   #2
SQLPowerUser
Форумчанин
 
Аватар для SQLPowerUser
 
Регистрация: 19.01.2015
Сообщений: 158
Стрелка Один из вариантов

Работает в IE 10-11
Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Всплывающая подсказка с помощью css</title>
<style>
.ToolTip{
  position:relative;
  width:140px; top:50px; left:50px;
  padding:4px;
  border:1px solid #ccc;
}
.ToolTip em{display:none;}
.ToolTip:hover em{
  display:block;
  position:absolute;
   background-color:#6598C7;
   border-radius:5px;
  color:#FFF;
  padding:3px 5px;
  bottom:27px;
  right:0;
}
.ToolTip:hover em tri{
  position:absolute;
  bottom:-7px;
  right:5px;
  border-top:7px solid #6598C7;
  border-left:7px solid transparent;
  display:block;
  height:0;
  overflow:hidden;
}
</style>
</head>
<body>
<div class="ToolTip">Навести мышь сюда<em>Подсказка<tri></tri></em> </div>
</body>
</html>
SQLPowerUser вне форума Ответить с цитированием
Старый 20.11.2015, 17:56   #3
nikolokaputik80
Пользователь
 
Регистрация: 30.09.2015
Сообщений: 74
По умолчанию

Цитата:
Сообщение от SQLPowerUser Посмотреть сообщение
Работает в IE 10-11
Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Всплывающая подсказка с помощью css</title>
<style>
.ToolTip{
  position:relative;
  width:140px; top:50px; left:50px;
  padding:4px;
  border:1px solid #ccc;
}
.ToolTip em{display:none;}
.ToolTip:hover em{
  display:block;
  position:absolute;
   background-color:#6598C7;
   border-radius:5px;
  color:#FFF;
  padding:3px 5px;
  bottom:27px;
  right:0;
}
.ToolTip:hover em tri{
  position:absolute;
  bottom:-7px;
  right:5px;
  border-top:7px solid #6598C7;
  border-left:7px solid transparent;
  display:block;
  height:0;
  overflow:hidden;
}
</style>
</head>
<body>
<div class="ToolTip">Навести мышь сюда<em>Подсказка<tri></tri></em> </div>
</body>
</html>



я попросил помочь с моим кодом, а вы кидаете что не попадя, зачем? вы мой пример в браузере открывале, видимо нет то и не нужно скидывать непонятно что - всякие примеры из интернета!
nikolokaputik80 вне форума Ответить с цитированием
Старый 15.12.2015, 16:29   #4
stupoz
Пользователь
 
Регистрация: 10.06.2015
Сообщений: 14
По умолчанию Вёрстка сайтов

Я бы убрал всё, что не проходит валидацию CSS и начал поиски с отказа от использования em для позиционирования и размеров не относящихся к шрифту (поля блоков).
stupoz вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающая подсказка Dexes JavaScript, Ajax 5 20.02.2012 15:59
всплывающая подсказка ГОСЕАН Помощь студентам 4 15.11.2011 14:04
Всплывающая подсказка Swatch Microsoft Office Access 1 18.03.2010 18:49
Всплывающая подсказка (С#) Лучик_света Помощь студентам 1 25.10.2008 10:44
Моя всплывающая подсказка не работает в IE Stason JavaScript, Ajax 1 11.09.2008 18:18