JS, координаты

03.07.2015

Что-то туплю. Есть функция всплывающей подсказки (от ридза, кстати): при наведении мыши появляется блок с position: absolute, которому задается стиль left (отступ слева).
a - это сам div. Выкладываю конечную часть, которую добавил сам, чтобы предотвратить выход за границу родителя.

var rect = a.getBoundingClientRect();
var tipWidth = rect.right - rect.left; // получаем ширину div
var tipFlow = 378 - (rect.left + tipWidth); // проверяем, не ушел ли div за правую границу родителя
b = c.pageX||c.clientX + (d && d.scrollLeft || f && f.scrollLeft || 0) - (d.clientLeft || 0); // некие волшебные расчеты от ридза
if(tipFlow < 0) { // если div хотя бы частично ушел за правую границу
a.style.left = ?????? "px"; // что написать здесь, чтобы блок отображался слева от курсора?
}
else { // все в порядке, div не вышел за рамку
a.style.left = 24 + b + "px"; // +24 пикселя от курсора, блок отображается справа от курсора
}
}
[spoiler="Полный скрипт"]
document.onmousemove = function (c) {
c = c || window.event;
var b = c.target;
if (b.dataset.tip) {
b.help = b.dataset.tip;
b.dataset.tip = "";
}
if (b.help) {
if (!document.getElementById("tooltip-msg")) {
a = document.createElement("div");
a.id = "tooltip-msg";
document.body.appendChild(a)
}
if (a.innerHTML != b.help) a.innerHTML = b.help;
var d = document.documentElement,
f = document.body;
b = c.pageX||c.clientX + (d && d.scrollLeft || f && f.scrollLeft || 0) - (d.clientLeft || 0);
d = c.pageY||c.clientY + (d && d.scrollTop || f && f.scrollTop || 0) - (d.clientTop || 0);
a.style.top = d + "px";
var rect = a.getBoundingClientRect();
var tipWidth = rect.right - rect.left;
var tipFlow = 378 - (rect.left + tipWidth);
if(tipFlow < 0) {
a.style.left = "";
}
else {
a.style.left = 24 + b + "px";
}

}
else document.getElementById("tooltip-msg") && document.body.removeChild(document.getElementById("tooltip-msg"))
};

[/spoiler]

********** - для наглядности.

04.07.2015

Разбираться в этом сложновато будет. Могу дать только наводящий совет: на javascript.ru есть две отличные статьи, которые описывают, как работают координаты ********** и **********.
Проблема, мне кажется, в том, что, если фиксировать справа тултип, то ховер работает уже не как обычно, т.е. метод getBoundingClientRect уже не очень подходит (по описанным в статье причинам).

UPD: посмотри разницу между своим скриптом и **********. у тебя считается положение области, а у них точка события движения мыши (event.clientX и подобные). мне думается, так правильней. я бы взял их скрипт и вырезал поддержку осла. получится ещё короче, чем у ридза. и более очевидно. нет строк, которые хочется прокомментировать как "магия"

06.07.2015

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

06.07.2015

так вроде ********** не вылезает за края. то, что надо же, не?

09.07.2015

Пойдет, спасибо еще раз, но сейчас задался целью сделать tooltip статическим, без привязки к движению курсора.
********** - идеально подошла бы, но jquery.
Пока взял на вооружение **********.

09.07.2015

Web3r, серьёзно? если ты задался целью сделать тултип статическим, зачем тогда тебе js вообще? **********

18.07.2015

Что-то даже не подумал об этом. Тогда стоит title убрать и добавить атрибут data и так же выводить его в content, чтобы windows-подсказка не маячила.