Как изменить положение всплывающих окон при наведении курсора CSS, чтобы они оставались в фиксированном фрейме?

У меня есть страница, заполненная множеством блоков фиксированного размера в макете сетки (div просто накапливается с плавающей точкой :осталось). При наведении курсора мыши на любой из них, над ним отображается «всплывающее окно» - более крупный div с такой же, а также дополнительной информацией, как если бы поле расширялось во всех направлениях (но не перемещая другие поля, это также показано над ними). Упрощенный html / css ниже. Это похоже на миниатюры / полные изображения, но фактическое содержимое представляет собой груду различных данных html, включая ссылки и т. Д.

Проблема в том, что таким образом «всплывающий» div для крайнего левого / правого блоков перемещается по экрану, запуск полосы прокрутки; или они обрезаются, если я не допускаю переполнения.

Вместо этого я хотел бы переместить эти всплывающие окна влево / вправо, чтобы они оставались в общих границах. Как подойти к этой потребности?

Я не могу сделать это на стороне сервера, поскольку сервер не знает, какие поля будут крайними правыми / крайними левыми - это зависит от размера окна, сколько столбцов там поместится. Моя первая идея - использовать javascript для изменения позиционирования всех всплывающих окон сразу после загрузки страницы, но я этого не делаю. Не знаю, как: а) узнать, какие всплывающие окна будут торчать за пределы кадра; и даже б) узнать размер всплывающих окон, поскольку они обычно скрыты, что означает width = height = 0, пока они не появятся.

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

В настоящее время Prototype / scriptaculous используется на некоторых других страницах, серверная часть находится в рубине на рельсах.

<div class="frame">
  <div class="box", id="object123" >
    small, fixed size content here
    <div class="popup">
      large, variable size/width/height content here that describes object123
    </div>
  </div>
  <div class="box", id="object456" >
    small, fixed size content here
    <div class="popup">
      large, variable size/width/height content here that describes object456
    </div>
  </div>
  ... many other similar boxes.
</div>

div.frame {
  overflow: hidden;
}
div.box {
  border:1px solid #efe9dc;  
  margin:5px;
  position:relative;
  float:left;
  height:70px;
  width:150px; 
}
div.popup {
  min-width:200px;
  display:none;
  position:absolute;
  left:-30px;
  top:-30px;    
  z-index:1000;
}
div.box:hover .popup { display: block; }