X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Корректировка HTML, Нужна ваша помощь
JayFunk
JayFunk
Topic Starter сообщение 18.1.2014, 0:42; Ответить: JayFunk
Сообщение #1


Завсегдатай
*****

Группа: Active User
Сообщений: 731
Регистрация: 6.7.2011
Из: Ukraine
Поблагодарили: 201 раз
Репутация:   44  


В общем при помощи #map сделал карту через хтмл. Далее сделал всплывающие подсказки, но трабл - они всплывают не там, где надо. Должны всплывать над ссылкой, а всплывают вверху справа...

При чем это только на карте, если делать подсказку просто тексту - все ок!

В общем вот так:



HTML ссылки таков:

<area shape="circle" coords="740,66,8" href="/index/0-2" class="tooltip yellow-tooltip" data-title="Установка дверей">


А css стиль таков:

.tooltip {
    position: absolute;
    background: #eaeaea;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    color: #222;
    outline: none;
    text-indent: 0;
}
.tooltip:hover:before {
    content: attr(data-title);
    white-space: pre-line;
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 9999;
    width: 230px;
    margin-left: -127px;
    padding: 10px;
    border: 2px solid #ccc;
}
.tooltip:hover:after {
    content: "";
    position: absolute;
    z-index: 10000;
    bottom: 24px;
    left: 50%;
    margin-left: -8px;
    border-top: 8px solid #ddd;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 0;
}
/* Yellow */
.yellow-tooltip:hover:before {
    border-color: #ffcc00;
    background-color: #fff;
    opacity:0.6;
    color:#000;
    text-align:center;
}
.yellow-tooltip:hover:after {
    border-top-color: #f7d85e;
}


Заранее спасибо!

Сообщение отредактировал JayFunk - 18.1.2014, 0:45


--------------------
1
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вёрстка. Per aspera ad html.
С радостью принимаю заказы по вёрстке.
3 ValeryRar 453 1.12.2017, 11:02
автор: ValeryRar
Открытая тема (нет новых ответов) Исправлю HTML ошибки на страницах Вашего сайта
10 guruapps 1199 30.11.2017, 22:59
автор: maxim1249
Горячая тема (нет новых ответов) HTML-вёрстка по доступной цене
30 graycat777 11482 25.11.2017, 23:56
автор: graycat777
Открытая тема (нет новых ответов) Корректировка шапки сайта
изменить расположение элементов , сколько стоит?
4 dtools 1550 9.11.2017, 12:09
автор: dtools
Горячая тема (нет новых ответов) [предлагаю] Качественные услуги по PHP/HTML/CSS/JS, любые движки
Услуги программирования
31 Alexandr_js 10053 2.11.2017, 16:36
автор: gretskov


 



RSS Текстовая версия Сейчас: 16.12.2017, 3:56
Дизайн