Как сделать всплывающее окно переполнением прокрутки div?

У меня есть прокручиваемый DIV, который содержит список многих элементов:

 ___________
|         |^|
| Item1   | |
|_________| |
|         | |
| Item2   | |
|_________| |
|         | |
| Item3   | |
|_________|v|

Когда пользователь перекатывается над элементом списка, появляется всплывающее окно с описанием этого элемента:

 ___________
|         |^|
| Item1   | |
|_________| |
|        _|_|____________________
| Item2 | Description for item 2 |
|________------------------------
|         | |
| Item3   | |
|_________|v|

Дилемма - это прокручивание div должно иметь переполнение: auto, но всплывающее окно должно быть видимым вне div. Итак, в настоящее время мое всплывающее окно отключается:

 ___________
|         |^|
| Item1   | |
|_________| |
|        _|_|
| Item2 | De|
|________---|
|         | |
| Item3   | |
|_________|v|

HTML

<div id="box">
  <ul>
    <li>
       <h2>Item 1</h2>
       <span>Description for item 1</span>
    </li>
    <li>
       <h2>Item 2</h2>
       <span>Description for item 2</span>
    </li>
    <!-- ... and many other items --->
  </ul>
</div>

CSS

#box {
   width: 10em;
   height: 20em;
   overflow: auto;
}

#box ul {
   line-height: 2em;
}

#box ul li {
   position: relative;
}

#box ul li span {
   display: none;
   position: absolute;
   right: -1em;
   top: 1em;
   height: 1em;
}

#box ul li:hover span {
   display: block;
}

Ответы

Ответ 1

Вы можете попробовать поэкспериментировать с позицией: зафиксировано в всплывающем элементе и посмотреть, поможет ли это вам:

http://jsfiddle.net/SpEb2/

Ответ 2

Я предлагаю вам сделать что-то еще, чтобы обойти это. Если вы используете JavaScript, вы можете сделать модуль специально для всплывающего окна. Поэтому всякий раз, когда вы хотите всплывать на текущей странице, вы просто включаете этот модуль.

Вы можете сделать этот модуль html и JavaScript смешанным, со скрытым всплывающим div с абсолютной позицией. Всякий раз, когда вы перемещаете курсор над некоторым элементом на своей странице с включенными всплывающими подсказками, просто вызывайте функцию JavaScript, чтобы вывести это скрытое всплывающее окно, где находится курсор (или элемент), и показывать всплывающее окно с соответствующей информацией.

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