Как ограничить размер DIV всплывающей подсказки / всплывающего стиля, чтобы он не вызывал полосы прокрутки на странице

Question

Мышь наводит курсор на элемент, и появляется подсказка. Подсказка переполняет страницу, вызывая полосу прокрутки, которая меняет макет настолько, что базовый элемент, который вызвал подсказку, больше не находится под указателем мыши, поэтому подсказка исчезает.

Наконечник исчезает, поэтому полоса прокрутки исчезает, и теперь мышь снова находится над элементом.

Стирать, полоскать, повторять.

Если бы я мог убедиться, что подсказка не слишком велика для запуска полос прокрутки, это решило бы мою проблему.

РЕДАКТИРОВАТЬ: После прочтения комментариев, некоторые вещи, чтобы уточнить: Div содержит текст, который может варьироваться. Если я могу, я хочу показать весь текст. Расположение div должно быть рядом с элементом, над которым находится подсказка мыши. Итак, главное, мне нужно знать, нужно ли обрезать текст.

Я нашел эту ссылку:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
который содержит этот кусок головоломки, выясняя, насколько велико окно браузера:

function alertSize() {
  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;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

Answer 1

вы можете использовать скрытый 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;
}

Answer 2

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

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];
}

Answer 3

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

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

Answer 4

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

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

например, вы можете запустить его скрытно:

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

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

Answer 5

Лучшей идеей может быть размещение всплывающей подсказки слева или справа от элемента в зависимости от того, какая сторона страницы ближе. У меня зафиксирована ширина всплывающей подсказки, я заполняю ее содержимым и делаю его видимым, когда это необходимо, а затем размещаю его в зависимости от положения мыши Вот ключевая часть обработчика события 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);
}

Answer 6

У меня была такая же проблема в начале этого года. Как я это исправил:

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

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

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

Надеюсь, это поможет!

Answer 7

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

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

Тогда, абсолютно позиционируйте свой тип div, и, для безопасности, присвойте ему атрибуты max-height и max-width. Если текст становится больше, задайте его overflow: scroll в CSS.

Answer 8

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

Редактировать: это следует делать только в случае «крайних ситуаций».

Answer 9

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

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

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

Надеюсь, это поможет.