Мерцает элемент при расчете позиционирования

[Daniil464]

Добрый день! Устал уже, мерцает элемент. Пытаюсь сделать всплывающую подсказку для всех картинок на странице. В js разбираюсь не особо, но вроде бы то что сделал должно работать по моей логике, но похоже логика js'а конфликтует, или это вообще невозможно сделать. Картинок будет много и много одинаковых, каждым прописывать класс или айди нет желания, поэтому таргетом для подсказок сделал атрибут(src путь к картинке).

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

Вот ссылка на мой г**код https://jsfiddle.net/Daniil464/vgnwj9q1/28/

Вызов через jQuery вместо $, потому что пишу для wordpress.

[laimas]

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

[Daniil464]

Спасибо за ответ, Booststrap есть, но его функционал меня не устраивает. Мне нужно выводить в подсказки куски кода в том числе. Плюс к этому, приписывать каждой подсказку и добавлять всем картинкам\иконкам класс, скажем которых может быть более 1000 на странице, абсолютно никакого желания. В целом мой костыль уже написан и работает, но с отступом от краев окна как то посолидней будет, вот и ломаю голову. Видимо в логике где то ошибся и скрипт циклически вычисляет свое положение относительно низа страницы, или что то в этом роде. По ссылке в коде расписал комментариями что и как.

[рони]

Daniil464,

mousemove: function(e){
let all = jQuery(window).height();
let height = jQuery('#hint').outerHeight(true) + 30;
let offset = all - (e.clientY + height);
let pagetop = e.pageY;
if (offset < 0) pagetop = e.pageY + offset;
hint.css({top: pagetop, left: e.pageX});
    }

[laimas]

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

Это не требуется, это как раз можно через JS сделать, добавлять подсказку по событию. А в Booststrap много всяких плюшек, в которые можно выводить любое содержимое.

[рони]

Daniil464,
в пределах видимости

[Daniil464]

Огромнейшее спасибо!