|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
20.11.2015, 16:20 | #1 |
Пользователь
Регистрация: 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> |
20.11.2015, 17:40 | #2 |
Форумчанин
Регистрация: 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> |
20.11.2015, 17:56 | #3 | |
Пользователь
Регистрация: 30.09.2015
Сообщений: 74
|
Цитата:
я попросил помочь с моим кодом, а вы кидаете что не попадя, зачем? вы мой пример в браузере открывале, видимо нет то и не нужно скидывать непонятно что - всякие примеры из интернета! |
|
15.12.2015, 16:29 | #4 |
Пользователь
Регистрация: 10.06.2015
Сообщений: 14
|
Вёрстка сайтов
Я бы убрал всё, что не проходит валидацию CSS и начал поиски с отказа от использования em для позиционирования и размеров не относящихся к шрифту (поля блоков).
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Всплывающая подсказка | 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 |