908 / 756 / 833
Регистрация: 06.09.2013
Сообщений: 1,561
1

Всплывающие подсказки заходят под таблицу

31.01.2015, 16:47. Показов 1850. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте! Я не силен в CSS, и прошу помощи: как сделать так, чтобы всплывающие подсказки не залазили под таблицу, а всплывали над ней? Возможно, нужно где-то поставить z-index, или прописать стили в таблице, но не знаю, где и какие. Теги pre обязательны. Заранее спасибо.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3 всплывающие подсказки</title>
<!-- Стили взял с http://www.sitehere.ru/vsplyvayushhie-podskazki-css3 -->
<style type="text/css">
.tooltip
{
  position: relative;
  background: #ccc; /* цвет поля слова */
  cursor: help;
  display: inline-block;
  text-decoration: none;
  outline: none;
}
.tooltip span
{
  visibility: hidden;
  position: absolute; 
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 3px solid #3dd;
  opacity: .9;
  background-color: #8ee;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}
.tooltip:hover
{
  border: 0; /* IE6 fix */
}
.tooltip:hover span
{
  visibility: visible;
}
 
pre{font-family: Monaco, 'Courier New', monospace;}
</style>
    </head>
    <body>
<br>
<br>
<br>
<br>
<br>
<table style="padding: 0px; border: 5px solid Lime;"><tr><td>
<div style="width: 650px; overflow: auto;"><pre>
<a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a> подсказки <a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a> Всплывающие подсказки <a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a>
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
<a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a> подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие <a class="tooltip">подсказки<span>Всплывающие подсказки</span></a> Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
<a class="tooltip">Всплывающие<span style="color: red">Всплывающие подсказки</span></a> подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
<a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a> подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
</pre></div>
</td></tr>
</table>
    </body>
</html>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
31.01.2015, 16:47
Ответы с готовыми решениями:

Всплывающие подсказки
Возможно сделать привязку по атрибуту? .tooltip:hover:after{ background: #333; ...

Ссылки на всплывающие подсказки
Как сделать ссылку на другой файл, загружаемый вместо текущего, я знаю. А как сделать, чтоб при...

Всплывающие подсказки для кнопок
Есть подсказки для кнопок. Всё хорошо, но на других разрешениях эти подсказки съезжают влево. Как...

Всплывающие подсказки с URL в левом нижнем углу
Здравствуйте! Есть ли способ отключить такое поведение браузера при наведении на ссылку, желательно...

4
Эксперт PHP
4925 / 3920 / 1620
Регистрация: 24.04.2014
Сообщений: 11,441
31.01.2015, 18:09 2
Лучший ответ Сообщение было отмечено erl27 как решение

Решение

erl27, убери у .tooltip position:relative, и у tooltip span bottom и left. Если тултип надо подвинуть, то через margin-top и margin-left
1
908 / 756 / 833
Регистрация: 06.09.2013
Сообщений: 1,561
31.01.2015, 18:47  [ТС] 3
Jewbacabra, все сделал как было сказано, поставил в .tooltip span выравнивание margin-top: -50px; margin-left: -100px; и стало нормально. Спасибо!
0
2 / 0 / 0
Регистрация: 31.01.2015
Сообщений: 1
31.01.2015, 19:13 4
Вот держи http://codepen.io/rivarchi/pen/OPxLRd
0
908 / 756 / 833
Регистрация: 06.09.2013
Сообщений: 1,561
01.02.2015, 17:23  [ТС] 5
Привет! Все работает, подсказка всплывает над таблицей, но мне по заданию в таблице нужны полосы прокрутки, и тут возникает проблема: когда опускаю вертикальную полосу вниз (т.е. текст поднимается вверх), то подсказка остается в том же положении относительно таблицы - оно и понятно, ведь позиция не задана relative. Можно ли как-нибудь это обойти, или здесь уже без JavaScript не обойтись? Можно ли всю таблицу заключить в теги DIV, и считать позицию подсказок не от таблицы, а от блока DIV?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3 всплывающие подсказки</title>
<style type="text/css">
.tooltip
{
  background: #ccc; /* цвет поля слова */
  cursor: help;
  display: inline-block;
  text-decoration: none;
  outline: none;
    color: #000
}
.tooltip span
{
  visibility: hidden;
  position: absolute;
  min-width: 150px;
  margin-left: -100px;
  margin-top: -50px;
  padding: 10px;
  border: 3px solid #3ee;
  opacity: 1.0; /* Уровень прозрачности всплывающего блока (от 0.0 до 1.0) */
  background-color: #8ee;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 10px 10px rgba(0,0,0,.5), 0 5px 5px rgba(255,255,255,.5) inset; /* Парамертры тени */  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}
.tooltip:hover
{
  border: 0; /* IE6 fix */
    background: yellow; /* цвет поля слова при наведении мыши */
    color: red; /* Цвет текста меняется при наведении мыши */
}
.tooltip:hover span
{
  visibility: visible;
    color: #000; /* Цвет текста */
}
 
pre{font-family: Monaco, 'Courier New', monospace;}
</style>
    </head>
    <body>
<br>
<br>
<br>
<br>
<br>
<div style="">
<table style="padding: 10px; border: 5px solid Lime;"><tr><td>
<div style="width: 650px; max-height: 400px; overflow: auto;"><pre>
<a class="tooltip">Вс<span>Всплывающие подсказки</span></a> подсказки <a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a> Всплывающие подсказки <a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a>
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
<a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a> подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие <a class="tooltip">п<span>Всплывающие подсказки</span></a> Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
<a class="tooltip">Всплывающие<span style="color: red">Всплывающие подсказки</span></a> подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
<a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a> подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки <a class="tooltip">Всплывающие<span>Всплывающие подсказки</span></a> подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки Всплывающие подсказки
</pre></div>
</td></tr>
</table>
<div>
    </body>
</html>
0
01.02.2015, 17:23
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.02.2015, 17:23
Помогаю со студенческими работами здесь

всплывающие подсказки
Сижу на Win8, пользуюсь Firefox. Уже задолбала до предела проблема - когда должна появляться...

всплывающие подсказки
мне нужно реализовать всплывающие подсказки при вводе неправильных данных в текстовое поле или...

Всплывающие подсказки
Подскажите пожалуйста как реализовать всплывающие подсказки при наведении на компонент , например...

Всплывающие подсказки
Приветствую. Подскажите плиз... Необходимо, чтобы при наведении мышки или при переходе по tab или...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru