CSS Tooltip внутри прокрутки div

Question

У меня есть простое всплывающее окно справки CSS, которое хорошо работает для меня в самых простых макетах. Но теперь он должен работать внутри прокрутки div.

Приведенный пример HTML:

<div style="overflow:scroll; width:80px">
<a href="#" class="tooltip">
an image
<span>some hidden tooltip which is a bit longer in here</span>
</a>
</div>

(Примечание: в реальном мире внутри прокрутки будет несколько подсказок с подсказками)

У меня есть CSS:

a.tooltip span 
{
display:none;
position:absolute;
padding:0px 0px 2px 2px;
background:yellow; 
text-decoration:none;
vertical-align:top;
}

a.tooltip:hover span
{
display:inline; 
position:absolute;
padding:0px 0px 2px 2px;
top:0;
left:18px;
background:yellow; 
text-decoration:none;
vertical-align:top;
z-index:5;
}

a.tooltip 
{
border-width:0px; 
text-decoration:none;
}

a.tooltip:hover
{
border-width:0px; 
text-decoration:none;
position:relative;
}

Возможно ли всплывающее окно из прокручиваемого div, чтобы его можно было читать, не вызывая прокрутку div?

Это достижимо только в CSS, без использования JavaScript?

edit: Live Example любезно предоставлено Kyle Sevenoaks .

Answer 1

Вы можете установить :hover для всего DIV. и поместите ваш промежуток прямо в div. (Это решение не работает в IE6, например).

см. Рабочий пример здесь: http://jsfiddle.net/5mASU/1/

Или вы можете установить i выше z-index для всплывающей подсказки и использовать фиксированное положение, это работает: http://jsfiddle.net/5mASU/3/

также избегайте сброса тех же значений при наведении, здесь приведена очищенная версия: http://jsfiddle.net/5mASU/4/

если, например, вы установили

a {
  padding: 5px; 
}
a:hover {
  // no need to reset the padding here
}

вам не нужно сбрасывать отступы в :hover, когда указатель мыши наследует отступы от стиля, установленного для a. Просто сбросьте значения, которые вы хотите изменить между нормальным и парящим состояниями.

Answer 2

Я не думаю, что это возможно, потому что z-индексы работают от родителя, дочерний элемент не сможет отображать диапазон сверху. Эта подсказка CSS просто добавляет еще один элемент, когда <a> наведен. Я думаю, что вам, возможно, придется пойти по пути jQuery.

Кроме того, попробуйте опубликовать живых примеров вашей проблемы вместо длинного списка HTML и CSS, нам будет проще помочь вам:)