| |
|
|
| | Всем привет!
Второй день уже вожусь с позиционированием всплывающей подсказки и ничего не получается...
На странице вывожу неопределенное количество блоков с данными из БД, блокам прописал стили:
.table_tr {
position:relative;
border:1px solid red;
width:98%;
overflow:auto;
z-index:1;
}
|
А внутри этого блока еще находится дочерние блоки
.table_td {
position:relative;
border:1px solid;
padding:0px 5px 0px 5px;
float:left;
}
.td_1 {
width:2%;
text-align:center;
}
.td_2 {
width:20%;
}
.td_3 {
width:10%;
text-align:center;
}
.td_4 {
width:7%;
text-align:right;
}
|
При наведении на блок .td_4 хочу выводить всплывающую подсказку
<div class='table_tr'>
<div class='table_td td_1'>текст</div>
<div class='table_td td_2'>текст</div>
<div class='table_td td_3'>текст</div>
<div class='table_td td_4 tooltip'>
текст<span>текст подсказки <br/>текст подсказки</span>
</div>
|
и css tooltip-а
.tooltip > span { /* стиль появляющейся подсказки */
position: absolute;
display: none;
}
.tooltip:hover > span,
.tooltip:focus > span {
position: absolute !important;
top:20px;
display: inline;
z-index: 999999;
}
|
Так вот, когда я навожу курсор на блок class='table_td td_4 tooltip' то у дива 'table_tr' появляется полоса прокрутки(скрол) а нужно чтобы подсказка ни как не влияла на блок table_tr, чтобы она появлялась поверх этого блока. Я ведь задал блоку абсолютное позиционирование и z-index: 999999 почему он оказывает влияние на блок table_tr?
Как сделать так чтобы он появлялся поверх других блоков, не влияя на позиционирования уже сушествующих блоков? | |
| |
|
