Как правильно указать top координаты

208
30 июня 2017, 08:49

Есть такой код:

function showTooltipCard(id_profile, position, target) { 
  var tooltip_card = ge("tooltip_card"); 
  var client_x = document.documentElement.clientWidth; 
  var client_y = document.documentElement.clientHeight; 
  var left, top; 
 
  var card_header = ge("card_header"); 
  var card_icon = ge("card_icon"); 
  var card_user_name = ge("card_user_name"); 
  var url = "/?act=card"; 
  ajax.post({ 
    url: url, 
    data: "user_id=" + id_profile, 
    callback: function(data) { 
      var response = JSON.parse(data); 
      if (response.error) { 
        Box.info("Ошибка", response.error.msg); 
        return; 
      } 
      card_header.style.backgroundImage = "url(" + response.card.backgroundHeader + ")"; 
      card_icon.style.backgroundImage = "url(" + response.card.backgroundIcon + ")"; 
      card_user_name.innerHTML = response.card.userName; 
      card_user_name.href = "/id" + id_profile; 
 
      tooltip_card.classList.remove("none"); 
 
      /** 
      * здесь top координаты 
      */ 
  
      left = position['left'] + (target.offsetWidth - tooltip_card.offsetWidth) / 2; 
 
      tooltip_card.style.left = left + "px"; 
      tooltip_card.style.top = top + "px"; 
 
      console.log("position Y " + position['y']); 
      console.log("client Y " + client_y); 
      console.log("offsetHeight " + tooltip_card.offsetHeight); 
      console.log("---------------------------------------------"); 
    } 
  }); 
}

2-ой параметр position принимает объект:

var object = {
  "left": getPositionCursorWindow(self).left, //el.getBoundingClientRect()
  "top": getPositionCursorWindow(self).top, 
  "x": getPositionCursor(self).x, //координаты курсора 
  "y": getPositionCursor(self).y
};

3 параметр - target - основной элемент, который получил событие(над которым должен появиться тултип - tooltip_card)

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

Answer 1

top нужно высчитывать так же как и left только используя offsetHeight

READ ALSO
Добавить методы в конструктор [дубликат]

Добавить методы в конструктор [дубликат]

На данный вопрос уже ответили:

193
Найти строки соответствующие шаблону YYYY/MM/DD HH:MM(:SS)

Найти строки соответствующие шаблону YYYY/MM/DD HH:MM(:SS)

Выбрать существующие даты между 1000 и 2012 годомСекунды могут быть опущены

174
Нужна помощь в решении задачи

Нужна помощь в решении задачи

Собственно выполняю задание на Codewars(Ссылка) и столкнулся с проблемой: что при тестировании кода, не всё хорошо

178
Почему не выполняется код на Developer Server

Почему не выполняется код на Developer Server

Всем привет! Есть код для оповещений он работает, все ок

168