Подсказка вылазиет за пределы экрана, как можно исправить?

Question

[River0051]

Здравствуйте, помогите исправить скрипт

$(document).ready(function() {
	$('.tr').mousemove(function(event) {

	var pos = $(this).offset();
	var pageX = event.pageX;
	var pageY = event.pageY;
	var x = pageX - pos.left + 10;
	var y = pageY - pos.top + 10;

	$(this).find('.hover').css({
		'display' : 'block',
		'left' : x + 'px',
		'top' : y + 'px'});
	});

	$('.tr').mouseout(function() {
		$(this).find('.hover').hide();
	});
});

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

P.S пытался сделать на библиотеках Tooltip jQuery UI, но не нашел примеров когда в роли подсказки выступает отдельный блок, а не атребут title

Answer 1

[Максим Тимофеев]

вылазиет

аж мурашки по коже

не нашел примеров когда в роли подсказки выступает отдельный блок

https://popper.js.org

Comments

[River0051]

Спасибо конечно за "мурашки"
Я прошу прощения, я не написал html разметку, думал из скрипта будет понятно
у меня на странице более 30 блоков с разным контентом, который должен показываться при наведении на объект и этот блок должен следовать за курсором мыши

<tr class="tr">
<td><div class="hover">тот самый скрытый блок коих более 30</div>
</td>
<td>блабла</td>
</tr>

потому мне варианты скрипта скрипта tooltip где блок нужно указывать непосредственно в скрипте "content" не подходит

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

P.S по факту я сделал то, что нужно немного иначе, но проблема в том, что подсказка скрывается за пределами экрана, потому я и обратился сюда, в надежде на помощь

[Максим Тимофеев]

потому мне варианты скрипта скрипта tooltip где блок нужно указывать непосредственно в скрипте "content" не подходит

не понял о чем Вы. Что такое

скрипте "content"

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

подсказка скрывается за пределами экрана

Ну так проверяйте не больше ли x, чем ширина экрана - ширина блока подсказки, и соответственно с y и высотой так же.

[River0051]

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

[Максим Тимофеев]

Станислав, загляните:
Как отпредилить размер окна браузера на javascript?

[River0051]

Максим Тимофеев, спасибо, но как его внедрить в мой скрипт я не представляю )

[Stalker_RED]

Станислав, варианты на выбор:
1. учить js
2. взять готовое решение
3. нанять кого-то

[River0051]

Stalker_RED, Вы бы еще в гугл послали, вы настоящий эксперт, помогли так помогли, весь toster.ru на вас держится.

[Максим Тимофеев]

Станислав, То есть Вы предлагаете сделать за Вас? На Stalker_RED действительно держится тостер, но он как и я не представляет как Вам помочь,

[Stalker_RED]

Станислав, с телефона код писать совсем неохота. Кроме того, вам уже посоветовали хорошее решение.

[River0051]

Максим Тимофеев, Stalker_RED, я смотрел тот вариант, спасибо за него еще раз, но я не смог найти примеров которые бы подходили, т.е код который я писал вначале полностью работает так как нужно, лишь одна проблема которую я описал. Потому я воспользовался предложением сайта и пригласил эксперта, если моя рекция на его варинты как-то Вас оскарбила, я этого не хотел и прошу прощения. Я не просил писать за меня, код который я указал почти полностью работает как нужно. Как-то так.

[Максим Тимофеев]

Станислав, Все логично, Вы написали "я мало понимаю в написании скриптов", Вам Stalker_RED ответил "учить js". Все логично и правильно, а вот Ваши последующие наезды не понятно о чем и зачем.

[River0051]

Максим Тимофеев, если продолжать логическую цепочку, то если бы у меня было время в текущий момент это сделать, я бы не просил у Вас помощи на сайте который построен на этом, и потом я уверен в моем коде пары строчек не хватает, для вас это ведь дело 3 минут, не так ли ?

[Stalker_RED]

Станислав,
Хронология (поправьте, если я не прав):

Вам кажется, что это задача на пару строк кода, но на самом деле это не так.
Максим Тимофеев, зная об этом, сразу предложил готовую библиотеку (их десятки или сотни подобных).

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

Максим Тимофеев предполагает версию с самообучением, и линкует определение размеров экрана.

Я вижу приглашение, и вот эту фразу в комментах:

но как его внедрить в мой скрипт я не представляю )

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

Спустя какое-то время я таки написал те заветные пару строк кода которые вы просили (отдельным ответом). При этом я осознаю всю убогосто такого решения. Вам придется его еще сильно дорабатывать, или брать что-то другое готовое, или оставить в таком глючноватом виде. Выбор за вами.

[Максим Тимофеев]

для вас это ведь дело 3 минут, не так ли ?

нет

я бы не просил у Вас помощи на сайте который построен на этом,

нет, сайт имеет смысл вопрос-ответ, а не просьба-решение, это на фриланс, тут такое не приветствуется и запрещено правилами.

Вы задали вопрос "Подсказка вылазиет за пределы экрана, как можно исправить?"
Получили ответ "проверяйте не больше ли x, чем ширина экрана - ширина блока подсказки, и соответственно с y и высотой так же."
Отмечаете как ответ, задаете другие вопросы - это правильное поведение с уважением к отвечающему
"че вам лень за меня сделать" - очень странное поведение.

[River0051]

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

Answer 2

[Stalker_RED]

Что-то вроде такого? jsfiddle.net/8o2utpnb/7
Но если присмотреться - оно в некоторых условиях дергается и перескакивает резко.
Лучше взять готовое решение, как и советовал @webinar

UPD: добавил transition и pointer-events:none на тултип, стало чуток получше, но все равно глючноватое.
jsfiddle.net/8o2utpnb/9

Comments

[River0051]

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

[Stalker_RED]

Станислав, что такое "и выполнялся html код"? HTML - это разметка вообще-то.

[Максим Тимофеев]

Почти то что нужно, только мне нужно

ну так допилите напильником

[River0051]

Stalker_RED, имелоcь введу, иногда html код не читается