HTML:

<ul class="clients">
 <li>
  <div class="over left">Description</div>
  <div class="inner">Image</div>
 </li>
</ul>

CSS:

.clients { margin-right: -20px; }
 .clients li {
  float: left;
  width: 128px;
  height: 120px;
  margin: 0 20px 20px 0;
  border: 1px solid #c2c2c2;
 }
  .clients .over {
   display: none;
   position: absolute;
   width: 250px;
   font-size: 11px;
   line-height: 16px;
   background: #ecf5fb;
   margin: 3px 0 0 3px;
   padding: 18px;
   z-index: 25;
  }
   .clients .right { margin: 3px 0 0 -161px; }
  .clients .inner { width: 128px; height: 120px; overflow: hidden; }

So, we have a list of floated squares and a popup blocks in each, which have absolute position.

JS:

jQuery(function($) {
 $('input[title!=""]').hint();
 $(".clients li").bind('mouseover mouseout',function(){$(this).find("div.over").toggle()});
});

If over - show, else - hide. Quite ok, but it must be more advanced, we should catch an offset and give a class to .over block:

• if offset from right (corner of browser window) less than 150px, then add class "right" for a .over block.
• if offset from right more than 150px - add class "left" for a .over block.

How can we do it?