Как я ограничиваю размер tooltip/popup-style DIV так, чтобы он не инициировал полосы прокрутки на странице

CSS: укажите подсказку width и height, добавить overflow: hidden или overflow: scroll к нему.

position: absolute хорошо работает также, но конечно, затем необходимо будет указать top и left положение подсказки.

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

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

например, Вы могли запустить его скрытый:

#tooltip {
  position: absolute;
  height: 100px;
  width: 200px;
  border: 1px solid #444444;
  background-color: #EEEEEE;
  display: none;
}

затем, на Вашем событии mouseOver (или независимо от того, что к этому обращаются), набор top и left CSS #tooltip туда, где когда-либо Вы хотите это и переключаете дисплей на block. поскольку это расположено абсолютно, это не вызовет мерцание.

Вот код, который я закончил тем, что использовал, и это, кажется, работает.

function display_popup(s)
{ 

    var popup = document.getElementById("popup");
    popup.innerHTML = s

    //viewport_height = $(document).height()  doesn't work
    viewport_height = get_viewport_size()[1] // does this factor in scrollbar?

    mytop = $(current_element).offset().top + $(current_element).height() + 4
    scroll_offset_y = $(document).scrollTop()
    y_in_viewport = mytop - scroll_offset_y

    if (y_in_viewport < viewport_height) // are we even visible?
    {
        // Display the popup, but truncate it if it overflows   
        // to prevent scrollbar, which shifts element under mouse
        // which leads to flicker...

        popup.style.height= ""
        popup.style.display = "block";

        if (y_in_viewport + popup.offsetHeight > viewport_height)
        {
            overflow = (y_in_viewport + popup.offsetHeight) - viewport_height

            newh = popup.offsetHeight -  overflow
            newh -= 10 // not sure why i need the margin..

            if (newh > 0)
            {
                popup.style.height = newh 
            }
            else
            {
                popup.style.display = "none";
            }
        }
        popup.style.left = $(current_element).offset().left + 40
        popup.style.top = mytop
    }
}


function get_viewport_size()
{
  var myWidth = 0, myHeight = 0;

  if( typeof( window.innerWidth ) == 'number' )
  {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  }
  else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
  {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  }
  else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
  {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }

  return [myWidth, myHeight];
}

можно использовать скрытый DIV, расположенный в 0,0 с набором ширины и высоты к 100% как 'критерий' для измерения клиентской области экрана

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

некоторый код ниже (непротестированный, разорванный из другого проекта и переименованный встроенный)

var toolTipDiv; //this is your tooltip div element
//call AdjustToolTipPosition(window.event);
function AdjustToolTipPosition(e)
{
    var cpos = getPosition(e);
    mouseX = cpos.x;
    mouseY = cpos.y;

    //Depending on IE/Firefox, find out what 
    //object to use to find mouse position

    toolTipDiv.style.visibility = "visible";

    //backdrop 'yardstick' for client area measurement
    var backdropDiv = document.getElementById("divBackdrop");

    //make sure floating box doesn't leave the screen
    //we know box is 200x200 plus margins, say 215x215
    if ((cpos.y + 215) > backdropDiv.offsetHeight)
    {
        cpos.y = backdropDiv.offsetHeight - 215;
    }
    if ((cpos.x + 215) > backdropDiv.offsetWidth)
    {
        cpos.x = backdropDiv.offsetWidth - 215;
    }
    toolTipDiv.style.left = cpos.x + "px";
    toolTipDiv.style.top = cpos.y + "px";
}
//this function courtesy of 
//http://hartshorne.ca/2006/01/23/javascript_cursor_position/
function getPosition(e) 
{
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) 
    {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    }
    else 
    {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}

Кажется мне, что то, в чем Вы нуждаетесь, является позицией курсора в клиентском окне браузера. Затем можно сделать вычисления для размещения подсказки, таким образом, она не пересекает границу.

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

И еще некоторая информация о размере браузера может быть найдена здесь.

Надежда это помогает.

Вы могли попытаться определить, где указатель, и если это находится в праве 1/4 (или безотносительно области, Вы определяете) области просмотра, поместите подсказку слева от указателя, иначе поместите его направо.

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

Затем абсолютно расположите свое отделение подсказки, и быть безопасными, дать ему a max-height и max-width атрибут. Если текст действительно растет, чем это, дайте его overflow: scroll в CSS.

Могло быть возможно установить фантом прозрачный DIV точно Вас целый размер страницы/области просмотра. Затем можно 'прикрепить' подсказку DIV в нем, предоставив CSS float:right атрибут. Это дало бы Вам, исправляют угловые меры главной/левой подсказки для заключительного рендеринга подсказки.

Править: это должно быть сделано только для случая 'граничных ситуаций'.

У меня была эта та же проблема ранее в этом году. Путем я зафиксировал его:

1. Я предположил, что вертикальная прокрутка в порядке, но прокрутка horizonal не. (Всегда было достаточно комнаты так, чтобы вертикальная полоса прокрутки не влияла на мое расположение),
2. Я зафиксировал относительное вертикальное положение подсказки относительно цели. (Верхняя часть подсказки всегда была на 5 пкс ниже нижней части привязки),
3. Левая сторона подсказки была установлена относительно размера экрана. Если целая подсказка могла бы соответствовать на одной строке, прохладной. Иначе я ограничил макс. ширину и заставил ее перенестись.

Одна вещь, которая помогла мне реализовать его, это было, была статья Find Position Quirksmode.

Мое решение не могло бы быть точно, что Вы ищете, но по крайней мере взглянули на ссылку Quirksmode, ее пользу.

Надежда, которая помогает!

Лучшая идея может состоять в том, чтобы поместить подсказку налево или направо от элемента, в зависимости от которого сторона страницы ближе. Я имею ширину своей исправленной подсказки, заполняю ее содержанием и делаю ее видимой при необходимости и затем располагаю ее в зависимости от положения мыши. Вот ключевая роль обработчика событий onMouseMove, когда подсказка включена:

if (!e) var e = window.event;
if(e) {
    var posx = 0;
    var posy = 0;

    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }

    var overflowX = (document.body.clientWidth + document.body.scrollLeft + document.documentElement.scrollLeft) - (posx + 25+ tooltip.clientWidth);
    if(overflowX < 0) posx -= 25+ (tooltip.clientWidth);

    var overflowY = (document.body.clientHeight + document.body.scrollTop + document.documentElement.scrollTop) - (posy + 15+ tooltip.clientHeight);
    if(overflowY < 0) posy += overflowY;

    tooltip.style.left=(10+posx);
    tooltip.style.top=(10+posy);
}