Абсолютно позиционированный элемент, который не выходит из области просмотра

Question

Абсолютно позиционированный элемент, который не выходит из области просмотра

0

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

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

Как я могу создать элемент, который абсолютно позиционирован и не будет отображаться вне поля зрения?

Изменение: желательно использовать CSS...

Titus 09 нояб. 2013, в 15:53

Источник

0

Если всплывающая подсказка следует за мышью, тогда просто установите ширину равной ее текущей ширине - половина ширины + пиксели мыши находятся слева или справа.
Lugia101101 09 нояб. 2013, в 14:57
0

Я бы предпочел, чтобы его ширина не изменилась. Я должен быть более ясным - дело не в том, что его ширина слишком велика, а в том, что при наведении курсора на элемент, который находится в самом правом / левом / верхнем углу и т. Д. Страницы, всплывающая подсказка отображается за пределами области просмотра.
Titus 09 нояб. 2013, в 15:11
0

Таким образом, вы имеете в виду, что всплывающая подсказка не отображается, или позиционирует себя, чтобы соответствовать?
Lugia101101 09 нояб. 2013, в 15:18
1

Вам нужно будет использовать JS, чтобы получить хорошее решение.
justisb 09 нояб. 2013, в 15:29

Показать ещё 2 комментария

Теги:

javascript

jquery

css

1 ответ

Ещё вопросы

Если всплывающая подсказка следует за мышью, тогда просто установите ширину равной ее текущей ширине - половина ширины + пиксели мыши находятся слева или справа.
Я бы предпочел, чтобы его ширина не изменилась. Я должен быть более ясным - дело не в том, что его ширина слишком велика, а в том, что при наведении курсора на элемент, который находится в самом правом / левом / верхнем углу и т. Д. Страницы, всплывающая подсказка отображается за пределами области просмотра.
Таким образом, вы имеете в виду, что всплывающая подсказка не отображается, или позиционирует себя, чтобы соответствовать?
Вам нужно будет использовать JS, чтобы получить хорошее решение.

silicakes · Answer 1 · 2013-11-09T14-05-00.000Z

Следуя приведенной здесь идее: Как определить, отображается ли элемент DOM в текущем окне просмотра?

Я получил:

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

var tooltip = $(".tooltip");
tooltip.show(); //we must make it visible in order to perform the test on the next line
if(!elementInViewport(tooltip)) {
  tooltip.hide();
}