Абсолютный позиционированный div, торчащий из прокручиваемого фиксированного положения div

Question

У меня есть страница с фиксированной прокручиваемой боковой панелью. При наведении одной из кнопок на боковой панели я хочу показать всплывающее окно/подсказку рядом с кнопкой. Однако всплывающая подсказка больше, чем боковая панель, поэтому она должна выходить из нее.

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

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

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

Вот скрипка, показывающая три случая: http://jsfiddle.net/8VF22/2/

Basic HTML и CSS:

<div class="main"> 
    <div class="sidebar"> 
     <div class="button">Hover me 
      <div class="tooltip">This tooltip hates my life and won't go outside the sidebar</div> 
     </div> 
    </div> 
</div> 

-

.sidebar { 
    position: fixed; 
    height: 100%; 
    overflow-y: scroll; 
} 

Так как идти об этом? Есть ли вообще что-нибудь, чтобы показать что-то за пределами прокручиваемого фиксированного контейнера и держать его в соответствии с боковой панелью при прокрутке.

Answer 1

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