Всплывающие подсказки на jquery

Всплывающие подсказки на jquery
Комментарии: 62

Для всплывающих подсказок на jquery не обязательно устанавливать плагины. Можно воспользоваться заготовкой, а затем подстроить скрипты и стили под свои нужды. Изначально jquery скрипты настроены для всплытия подсказок при клике на определенный текст, но можно переделать показ при наведении курсора. Рассмотрим первый вариант.

Ссылка на подсказку 1 | Ссылка на подсказку 2

Перейдём к реализации. Для этого потребуется проделать следующие шаги:

Исходим из того, что jquery библиотека уже подключена. Переходим к подключению скриптов. Просто скопируйте их на страницу или вынесите в отдельный файл и подключите его.

<script type="text/javascript">
	$(function () {
	  $('.real-show-hint').on("click", function(e){ 
	  	e = e || window.event; 
	  	e.preventDefault();
	  	var ypos = $(this).offset().top+24;
	  	var xpos = $(this).offset().left;
	  	var RealHint =  $(this).data('hint');
	  	$(RealHint).css('top',ypos);
	  	$(RealHint).css('left',xpos);
	  	$(RealHint).toggle('fast'); 
	  	return; 
	  	});

	  $('.prm-cross').on('click', function(){ 
	  	$(this).parent().hide('fast'); 
	  	return false; 
	  });

	  document.onclick = function(e){ 
	  	if ($(e.target).hasClass('real-hint')==false) 
	  	$('.real-hint').hide('fast');
	  	return;
	  }
	});
</script>

Обращу внимание на первую строку $('.real-show-hint').on("click", function(e){. Эта функция отвечает за событие, которое приведёт к всплытию подсказки. Если заменить "click" на "mouseover mouseout", то подсказки будут появляться при наведении мыши, а не клике.

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

<style type="text/css">
	.real-hint {
	  background-color: #fff;
	  border: 1px solid #aaa;
	  border-radius: 10px;
	  display: none;
	  padding: 5px 10px;
	  position: absolute;
	  width: 250px;
	  z-index: 99;
	}

	.real-hint .hint-caption {
		font-weight: bold;
		text-transform: uppercase;
	}

	.real-hint .prm-cross {
		background: url("/images/cross.jpg") no-repeat scroll right top rgba(0, 0, 0, 0);
		cursor: pointer;
		float: right;
		height: 16px;
		margin-top: 3px;
		padding-left: 15px;
		right: 10px;
		width: 16px;
	}

	.real-show-hint {
		cursor: pointer;
		border-bottom: dashed 1px;
		color: #8c0000;
	}
</style>

В строке background: url("/images/cross.jpg") указывается путь к изображению крестика, используемого для закрытия всплывающей подсказки. Не забудьте загрузить это изображение на сайт и указать правильный путь. Вот иконка: крестик

Создаём окна с подсказками. По умолчанию они будут скрытыми (за это отвечают стили). Размещать их лучше после открывающегося тега «body» или перед закрывающимся. Если разместить где-то в другом месте, то координаты всплывающего окна могут рассчитаться неправильно. Это зависит от вёрстки. На некотрых сайтах может быть всё в порядке, а на некоторых — нет.

<div id="real-hint-1" class="real-hint">
	<div class="prm-cross"></div>
	<span class="hint-caption">Подсказка 1.</span><br/>
	Вы нажали на первую ссылку
</div>

<div id="real-hint-2" class="real-hint">
	<div class="prm-cross"></div>
	<span class="hint-caption">Подсказка 2.</span><br/>
	Вы нажали на вторую ссылку
</div>
Подсказка 1.
Вы нажали на первую ссылку
(help)

Подсказок может быть сколько угодно. Основные требования, это class="real-hint" и id="real-hint-2". Идентификатор у каждой подсказки должен быть уникальным, именно его мы будем указывать в аттрибутах элемента при клике на который будет осуществлено всплытие.

<span class="real-show-hint" data-hint="#real-hint-1" >Ссылка на подсказку 1</span>
<span class="real-show-hint" data-hint="#real-hint-2" >Ссылка на подсказку 2</span>

А вот и сами элементы, при нажатии на которые будет показываться то или иное окно. Элементами могут выступать любые теги, главное прописать для них класс и аттрибут, указывающий на идентификатор подсказки, которую следует показать: class="real-show-hint" data-hint="#real-hint-1". Решётка перед идентификатором подсказки обязательна.

Jquery подсказка, появляющаяся при наведеннии мыши

Рассмотрим ещё одни способ создания всплывающих подсказок. по принципу действия он аналогичен первому, за некоторыми исключениями. Подсказки появляются при наведении курсора на какой-то эелемент и перемещаются вслед за мышью.

Наведи курсор 1 Наведи курсор 2

В код страницы добавляем пустой элемент:

<div id="tooltip"></div>

Для этого элемента прописываем стиль.

#tooltip {
  z-index: 9999;
  position: absolute;
  display: none;
  top:0px;
  left:0px;
  width: 250px;
  background-color: #fff;
  padding: 5px 10px 5px 10px;
  color: #000;
  border-radius: 5px; 
  box-shadow: 0 1px 2px #555;
}

Добавляем элементы, при наведении на которые будет появляться подсказка.

    
<p><span data-tooltip="Подсказка номер 1">Подсказка 1</span> | <span data-tooltip="Подсказка номер 2">Подсказка 2</span></p>

И остается jquery скрипт.

$(function(){
      $("[data-tooltip]").mousemove(function (eventObject) {
          $data_tooltip = $(this).attr("data-tooltip");
          $("#tooltip").html($data_tooltip)
              .css({ 
                "top" : eventObject.pageY + 5,
                "left" : eventObject.pageX + 5
              })
              .show();
          }).mouseout(function () {
            $("#tooltip").hide()
              .html("")
              .css({
                  "top" : 0,
                  "left" : 0
              });
      });
});
Подсказка 2.
Вы нажали на вторую ссылку
Темы:
jQueryJavaScript
Ещё интересное — 6
Комментарии —
  1. bibitur
    bibitur26 октября 2015, 09:30(был изменён)#
    А как сделать, чтобы текст подсказки забирался из отдельного текстового или html-файла?
    Я хочу сделать один сводный файл со всеми подсказками, а при необходимости использования на странице подсказки, просто указывать путь к нужному куску текста. Как на Яндекс.Маркет. На мой взгляд, это намного удобнее в плане правки исходного текста подсказок и их одинаковости на всех страницах.
    1. Andy Si26 октября 2015, 14:09#
      Это уже индивидуально нужно что-то разрабатывать. Либо парсить на php эти текстовые файлы и рассовывать текст по скрытым блокам, либо использовать Ajax. В двух строчках не опишешь.
      1. Вася
        Вася11 декабря 2015, 15:33#
        Зачем ajax? Зачем парсить в php? Зачем по DIV-у на каждый элемент? (кроме «у меня хинты по оформлению разные будут»). JavaScript и JQuery у Вас уже используется. Ну и пользуйтесь себе ассоциативными массивами.
        Хранить как js в отдельном файле примерно так:
        var hints = {«real-hint1»: «1», «real-hint2»: «2» ......};
        Он будет отлично кешироваться браузером и Вашим веб-сервером. Доступаться в js-коде так:
        hints[«real-hint1»]
        где вместо «real-hint1» используйте id элемента (у вас — span с надписями «Ссылка»). Тогда Вам не понадобятся DIV-вы на каждый хинт — конструируйте их из одного, невидимого шаблона — совсем хорошо, если у Вас на странице 50 хинтов — реально сократится размер страницы.
        1. Andy Si11 декабря 2015, 16:56#
          Да, действительно так проще намного.
    2. setcode
      setcode21 февраля 2016, 20:27#
      Блин ((( То что нужно, но не получается, при клике подсказка появляется и тут же пропадает.
      Прикручиваю все это дело к WP
      1. Andy Si22 февраля 2016, 10:48#
        Попробуй удалить из скрипта этот кусок, без него должно заработать как надо:
        document.onclick = function(e){ 
        	if ($(e.target).hasClass('real-hint')==false) 
        	$('.real-hint').hide('fast');
        	 return;
        }
        1. student
          student20 ноября 2017, 15:35#
          Можно заменить на
          $(document).mouseup(function(e) 
          {
              var container = $(".real-hint");
              if (!container.is(e.target) && container.has(e.target).length === 0) 
              {
                  container.hide();
              }
          });
          1. Andy Si23 ноября 2017, 10:37#
            ок, спасибо.
      2. Роман
        Роман12 марта 2016, 06:28(был изменён)#
        Здравствуйте. Я столкнулся с такой проблемой, в 1 варианте примера, а именно того примера подсказки который открывает окно подсказки при клике на ссылку, работает не корректно, я имею введу что, при нажатии на ссылку окно подсказки множество раз открывается и сразу же закрывается, я решил последовать тому примеру который Вы отписали для (setcode 21 февраля 2016 в 20:27), этот вариант не до конца решил всю суть проблемы, то есть после удаления той части кода скрипта который Вы отписывали выше, подсказка действительно перестала закрываться при нажатии на ссылку, но она также и перестала закрываться при нажатии на любую область, за исключением самого крестика который расположен внутри окна подсказки, и здесь к сожалению скрипт снова показал себя не корректно( Скажите пожалуйста, почему на вашей странице 1-й пример подсказки работает абсолютно корректно, и с чем связанно то что, внутри HTML кода Вашей страницы вложена расширенная версия скрипта, а не та что Вы опубликовали в первом примере?
        1. Andy Si12 марта 2016, 09:42(был изменён)#
          Привет. Это не расширенный код, всё что начинается с
          $("[data-tooltip]").mousemove
          это относится уже ко второй части статьи, с первой никак не связано.

          Что касается твоей проблемы — попробуй в функции
          $('.real-show-hint').on("click", function(e){
          заменить return; на return false;, а то что удалял — верни.
        2. Роман
          Роман12 марта 2016, 19:52#
          Благодарю Вас за помощь, это очень мне помогло! По возможности ответьте пожалуйста ещё на несколько вопросов.

          1. Зачем в коде присутствует этот элемент, после удаления этих строк ничего не изменилось, скрипт работает корректно?

          $('.prm-cross').on('click', function(){
          $(this).parent().hide('fast');
          return false;
          });

          2. Как сделать так что бы при нажатии к примеру на 2 подсказку 1 подсказка сразу же автоматически закрывалась?
          1. Роман
            Роман12 марта 2016, 19:59#
            Относительно 1-вого вопроса извиняюсь, глупый был вопрос с моей стороны, я пока что только учусь, так что не судите строго)
            1. Полина
              Полина13 марта 2016, 07:20#
              Подскажите пожалуйста, что конкретно нужно изменить в коде что бы при нажатии на текст окна подсказки оно не сворачивалась? Я имею введу именно тот текст который находится к примеру в теге span TEXT /span внутри самого окна подсказки.
              1. MoXa
                MoXa31 марта 2016, 13:46#
                Спасибо огромное за труды!!!
                То что мне нужно было и с чем провозилась три дня!!!

                1. Andy Si31 марта 2016, 21:44#
                  Всё для Вас. Спасибо за отзыв.
                2. Алексей
                  Алексей06 августа 2016, 14:24(был изменён)#
                  Спасибо за код. Подскажите, как в подсказке написать текст в несколько строк?
                  1. Andy Si06 августа 2016, 15:29#
                    В первом способе переносится через br, можно посмотреть на самой первой ссылке «Ссылка на подсказку 1». А во втором способе перенос не предусмотрен, можно только фиксированную ширину поля уменьшить, тогда текст автоматом будет переноситься:
                    width: 342px;
                    Либо каким-то другим jquery плагином пробовать вывести подсказку, их много.
                  2. Валерий Новиков
                    Валерий Новиков08 августа 2016, 19:31#
                    Доброго времени суток…

                    Подскажите пожалуйста:

                    Как сделать так что бы при нажатии к примеру на вторую подсказку первая подсказка сразу же автоматически закрывалась?
                    1. Andy Si09 августа 2016, 09:37#
                      В обработчик попробуй добавить строку, которая будет сначала закрывать открытые подсказки:
                      $('.real-show-hint').on("click", function(e){
                      	$('.real-hint').hide();
                      	...
                      1. Валерий Новиков
                        Валерий Новиков09 августа 2016, 12:54#
                        спасибо
                    2. Валерий Новиков
                      Валерий Новиков09 августа 2016, 13:42#
                      еще вопрос а если я в эту подсказку хочу впихнуть форму… Я ее туда добавил но как только начинаю вводить в нее данные подсказка закрывается (
                      1. Andy Si09 августа 2016, 14:39(был изменён)#
                        Тогда удаляй обработчик
                        document.onclick = function(e){...
                        закрыватся будет только при нажатии на крестик, по другому никак
                      2. Estra
                        Estra18 сентября 2016, 21:40#
                        Во втором примере, что изменить что бы во всплывающей подсказке была картинка?
                        1. Andy Si18 сентября 2016, 21:50#
                          Второй способ только для простых текстовых подсказок… вставка картинок невозможна
                        2. Neznajka
                          Neznajka04 октября 2016, 09:45#
                          Очень интересная статья!
                          Но — хочу вникнуть в суть, что вот это за «штуки»:
                          $('#last-order') и ещё ' аМаИаН'
                          Гугл про #last-order' и про ' аМаИаН' выдаёт всякую постороннюю хрень :(
                          Подскажите, что это за выражения и зачем они нужны в данном случае?
                          1. Andy Si04 октября 2016, 10:03(был изменён)#
                            Спасибо большое, что написали про это. Строки нужно удалить, они попали в скрипт случайно. Удалил из статьи.
                            newStr = $('#last-order').html() + ' аМаИаН';
                            $data_tooltip = $data_tooltip.replace('0 аМаИаН',newStr);
                            Копировал скрипт из одного своего проекта, где требовалась подмена всплывающего текста в зависимости от другого элемента. аМаИаН — в правильной кодировке — минут. Соответственно шла подмена значения '0 минут' на значение из элемента #last-order, типа на 5 минут.
                          2. Artem
                            Artem07 ноября 2016, 14:59(был изменён)#
                            Привет, понравилась статья очень помог, один вопрос, во втором примере при наведении появляется подсказка с текстом можно сделать так что бы была картинка png ???
                            Я так понимаю в этом кусочке передается текст
                            $("#tooltip").text($data_tooltip)
                            мне бы картинку img/****.png
                            1. Andy Si07 ноября 2016, 15:07#
                              В data-tooltip можно только текст передать. Можно что-то придумать чтобы вставить и изображение, но это придётся переделывать скрипт.

                              Если же во всех подсказках будут именно картинки, то можно в data-tooltip передавать путь к изображению а в скрипте переделать блок на:
                              $("#tooltip").text('<img src="'+$data_tooltip+'">')
                              может что и выйдет.
                              1. Artem
                                Artem07 ноября 2016, 16:29(был изменён)#
                                нет выводит как текст следующее:
                                <img src="img/1.png">

                                черт с ним.
                                Может как то возможно в первом случае, там где по нажатию окно вылазит, оно всегда появляется в одном и том же месте,
                                var ypos = $(this).offset().top+24;
                                var xpos = $(this).offset().left;
                                а можно сделать так что бы по нажатию( допустим жму на картинку и в том месте где был курсор появилось это окошко или рядом с картинкой)
                                1. Andy Si07 ноября 2016, 16:49(был изменён)#
                                  Да всё можно, просто переписывать надо код. Координаты появления задаются тут:
                                  var ypos = $(this).offset().top+24;
                                  var xpos = $(this).offset().left;
                                  нужно отловить клик на элементе, принять положение курсора в этом месте и передать в эти переменные.

                                  Ещё попробуй заменить на
                                  $("#tooltip").html('<img src="'+$data_tooltip+'">')
                                  Ну либо поищи jquery плагины с всплывающими подсказками. Наверняка полно разных.
                                  1. Artem
                                    Artem07 ноября 2016, 17:41#
                                    Ладно спасибо большое)
                                    1. Artem
                                      Artem07 ноября 2016, 17:45#
                                      Заработало)
                              2. Анонимус
                                Анонимус21 декабря 2016, 17:13#
                                Что сделать чтобы при открытом дополнительном окошке ссылка светилась другим цветом, при закрытии менялась на дефолтное значение?
                                1. Andy Si22 декабря 2016, 12:45#
                                  В скрипте прописать при событиях добавление и удаление к ссылке класса, например msg-active. Присвоить этому классу нужный цвет с помощью css стилей: .msg-active { color: red; }

                                  Ну и в скриптах править, например сюда добавить:
                                  $('.real-show-hint').on("click", function(e){ 
                                  $(this).toggleClass('msg-active');
                                  
                                  И надо ещё продумывать, как убирать этот класс, если нажали на кнопку закрытия. Я пока не придумал, дописывать надо много.
                                  1. Анонимус
                                    Анонимус23 декабря 2016, 12:17#
                                    Спасибо, как раз гагуглил это, хотел пробовать
                                2. Виктор
                                  Виктор12 мая 2017, 12:19#
                                  А как сделать так, чтобы окно появлялось, а не вытягивалось с левого верхнего угла?
                                  1. Andy Si12 мая 2017, 13:23#
                                    Изменить параметр в скрипте $(RealHint).toggle('fast'); на $(RealHint).toggle(0);
                                  2. Виктор
                                    Виктор12 мая 2017, 14:18#
                                    Спасибо, получилось. Сейчас при клике на кнопку «Добавить в корзину» у меня написано «В корзине», но когда обновляю страницу или жму на другую кнопку эта надпись спадает. Как ее зафиксировать не подскажете?
                                    1. Andy Si12 мая 2017, 15:39#
                                      Не знаю, это зависит от конкретного случая. Javascript не может знать что было до перезагрузки страницы, соответственно, надо хранить эту информацию, например в куках.
                                    2. Лариса
                                      Лариса03 июня 2017, 14:03(был изменён)#
                                      А вы не могли бы подсказать почему у меня подсказка по клику появляется и тут же исчезает уже без всяких кликов? а у вас на сайте все ок работает)
                                      1. Andy Si04 июня 2017, 19:30(был изменён)#
                                        Попробуй сделать как написано в этом комментарии. Уже была такая проблема, надо будет разобраться почему так происходит.
                                        1. Александр
                                          Александр08 апреля 2024, 16:22(был изменён)#
                                          Добрый день! Не работает ссылка на комментарий. Как всё же обойти эти быстрые сворачивания?

                                          1. Andy Si08 апреля 2024, 18:08#
                                            Сверху в комментариях сначала надо нажать — Показать старые, и потом по этой ссылке перейти. Я там давал пример, как можно попробовать. Или просто так полистать все комменты.
                                            1. Александр
                                              Александр09 апреля 2024, 16:23#
                                              Спасибо, помогло
                                      2. Кирилл
                                        Кирилл11 марта 2018, 19:47#
                                        Как бы еще сделать что бы можно было кликать по одному контейнеру а подсказка вылезала у другого, попробовал просто разнести по разным class=«real-show-hint» и data-hint="#real-hint-2" но почемуто не работает :( не подскажите почему?
                                        1. Andy Si12 марта 2018, 10:03(был изменён)#
                                          Позиционирование подсказки идет относительно элемента, через который она вызывается. В твоём случае уже надо что-то придумывать. Например, при нажатии на 1й контейнер просто генерировать клик по 2му контейнеру. Тогда там будет всплывать подсказка. Ну типа добавить первой ссылке:
                                          onclick="$('#container2').click();"
                                        2. Сергей
                                          Сергей21 декабря 2018, 10:33(был изменён)#
                                          Я пытаюсь получить всплывающее окно с предупреждением при наведении курсора на гиперссылку. Я пытаюсь использовать JQuery и Javascript. Я не уверен, что мне не хватает в моем коде в настоящее время. Гиперссылка находится в якоре внутри основного.
                                          1. Andy Si21 декабря 2018, 11:58#
                                            Там уже дали правильный ответ — не хватает закрывающихся скобок.
                                          2. Константин
                                            Константин16 марта 2024, 09:56#
                                            Здравствуйте
                                            Замечательно! Просто, изящно и работает. Правда у меня не работает одно, в вопросах не нашел братьев по несчастью: если в тексте подсказки ссылка, то она не кликабельна. ЧЯДНТ?
                                            1. Константин
                                              Константин16 марта 2024, 12:55#
                                              Простите, я идиот. Вместо href опечатался htef
                                              1. Andy Si16 марта 2024, 14:15#
                                                хорошо что разобрался, бывает)
                                            2. Константин
                                              Константин16 марта 2024, 16:21(был изменён)#
                                              И все же — вопрос:
                                              Правильно понимаю, что скрипт должен грузиться одновременно с отрисовкой целевых
                                              <div>
                                              ? Просто я пытался сделать так — в
                                              <head>
                                              <script src='/java/этот_скрипт.js'></script>
                                              Но на странице формируется html через ajax (корзина товаров), и вставленный туда real-show-hint не работает — я вывожу его вместе
                                              <div id='real-hint-1' class='real-hint'>
                                              через переменную в PHP и заработало только когда в эту переменную пихнуть и
                                              <script src='/java/этот_скрипт.js'></script>
                                              Я тупенький, а нельзя ли основной скрипт запихнуть куда-нибудь типа

                                              $(document).ajaxComplete(...)

                                              Ну то есть добавить прослушку события — загрузка страницы ИЛИ обновление аяксом (ну типа чтобы работало везде — и на статических стр. тоже)? Я с при помощи stackoverflow и такой-то матери в одном месте у себя так за ставил работать калькулятор тарифов…
                                              1. Andy Si16 марта 2024, 17:22#
                                                Если надо, то можешь динамически его подключить в любой момент:
                                                let s = document.createElement('script');
                                                  s.type = 'text/javascript';
                                                  s.src = '/java/этот_скрипт.js';
                                                  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s);
                                                1. Константин
                                                  Константин16 марта 2024, 17:32#
                                                  Папа, а ты с кем сейчас разговариваешь???
                                                  Но направление ясно, я с возрастом умнею а не тупею, что странно… Пока мне проще, судя по всему, пихать в переменную сразу все. Дойду до замены ws_tooltip в масштабах сайта, буду напрягать непропитые остатки мозга…
                                              2. Константин
                                                Константин17 марта 2024, 17:06#
                                                Автор — чертов гений. Скрипты весят несколько сот байт, написаны изящно, все работает (пропадала подсказка сразу после появления, пришлось делать как советовали в одном из комментов), картинки вставляются… Выкидываю нафиг громоздкий wz_tooltip и перехожу на эти.

                                                Но! Для счастья не хватает одного: у wz_tooltip окошко всплывающее не ездило за курсором, но при этом не выходило за вьюпорт — то есть на узких экранах оно упиралось в левый край и относительно курсора сдвигалось влево.

                                                У этого скрипта окно выскакивает за край, если близко от края курсор… Нельзя это как-то реализовать как у wz_tooltip? Точнее — знаю, что можно. Вопрос как…
                                                1. Константин
                                                  Константин17 марта 2024, 18:21#
                                                  Сам острю — сам смеюсь, вроде работает

                                                  $("[data-tooltip]").mousemove(function (eventObject) {
                                                      $data_tooltip = $(this).attr("data-tooltip");
                                                      var winWidth = document.getElementById('tooltip').offsetWidth;
                                                      var posX = eventObject.pageX + 5;
                                                      if ((document.body.clientWidth - eventObject.pageX) < winWidth) {
                                                        posX = document.body.clientWidth - winWidth;
                                                      }
                                                      $("#tooltip").html($data_tooltip)
                                                      .css({
                                                        "top" : eventObject.pageY + 5,
                                                        "left" : posX
                                                      })
                                                      .show();
                                                  1. Andy Si17 марта 2024, 19:23#
                                                    Не знаю как у wz_tooltip, но можешь тут ещё на сайте поискать статью — Всплывающая подсказка на CSS, там вообще без JS и Jquery обходится и за курсором не ездит. Но уже только текст.
                                                    1. Константин
                                                      Константин17 марта 2024, 19:51#
                                                      Добился почти феншуя:

                                                      Если по горизонтали окно не влезает в расстояние до края, то оно упирается в край.
                                                      Если по вертикали окно не влезает в расстояние до низа браузера — оно перекидывается вверх. Если при этом вверху тоже мало места — то окно встает серединой к мыши.

                                                      $(function(){
                                                        $("[data-tooltip]").mousemove(function (eventObject) {
                                                          $data_tooltip = $(this).attr("data-tooltip");
                                                          var winWidth = document.getElementById('tooltip').offsetWidth;
                                                          var winHeight = document.getElementById('tooltip').offsetHeight;
                                                          var posX = eventObject.pageX + 5;
                                                          var posY = eventObject.pageY + 5;
                                                          if ((document.body.clientWidth - eventObject.pageX) < winWidth) {
                                                            posX = document.body.clientWidth - winWidth;
                                                          }
                                                          if ((document.documentElement.clientHeight - eventObject.clientY) < winHeight) {
                                                            posY = eventObject.pageY - winHeight;
                                                            if (eventObject.clientY < winHeight) {
                                                              posY = eventObject.pageY - winHeight / 2;
                                                            }
                                                          }
                                                          $("#tooltip").html($data_tooltip)
                                                          .css({
                                                            "top" : posY,
                                                            "left" : posX
                                                          })
                                                          .show();
                                                        }).mouseout(function () {
                                                          $("#tooltip").hide()
                                                          .html("")
                                                          .css({
                                                            "top" : 0,
                                                            "left" : 0
                                                          });
                                                        });
                                                      });
                                                      1. Константин
                                                        Константин18 марта 2024, 13:46#
                                                        В общем, феншуй не очень сросся. Попытки узнать размер div если display:none ни к чему не привели, прикрутил костыль. Причем работает он для Х, если подобное делать и для Y то получаются непонятные скачки окна… Плюнул, так как по Y это а) исключительно редкий случай и б) юзер легко крутанет экран чтобы увидеть подсказку, а показываться краюшек будет… Правда так и неясно, почему при медленном движении мыши по div если окно сдать до мелкого размера — когда всплывающее с трудом помещается — постоянно сбрасывается размер окна, оно как бы трепещет…
                                                        Итог:

                                                        $(function(){
                                                          $("[data-tooltip]").mousemove(function (eventObject) {
                                                            $data_tooltip = $(this).attr("data-tooltip");
                                                            var winWidth = document.getElementById('tooltip').offsetWidth ? document.getElementById('tooltip').offsetWidth : 300;
                                                            var posX = (document.body.clientWidth - eventObject.pageX) < winWidth ? document.body.clientWidth - winWidth : eventObject.pageX + 5;
                                                            var winHeight = document.getElementById('tooltip').offsetHeight;
                                                            var posY = (document.documentElement.clientHeight - eventObject.clientY) < winHeight ? eventObject.clientY < winHeight ? posY = eventObject.pageY - winHeight / 2 : eventObject.pageY - winHeight : eventObject.pageY + 5;
                                                            $("#tooltip").html($data_tooltip)
                                                            .css({
                                                              "top" : posY,
                                                              "left" : posX
                                                            })
                                                            .show();
                                                          }).mouseout(function () {
                                                            $("#tooltip").hide()
                                                            .html("")
                                                            .css({
                                                              "top" : 0,
                                                              "left" : 0
                                                            });
                                                          });
                                                        });
                                                      2. Константин
                                                        Константин18 марта 2024, 09:56#
                                                        Есть все же бажок — проявляется на мобилах. Там же нет «движения мыши», вместо этого короткий тап как-бы это эмулирует. Походу при ПЕРВОМ движении (на компе это не заметно, так как сложно двинуть мышь на один шаг и замереть) скрипт не успевает получить

                                                        var winWidth = document.getElementById('tooltip').offsetWidth;
                                                            var winHeight = document.getElementById('tooltip').offsetHeight;
                                                        И окошко вылетает за край, при повторном тапе — все ОК, упирается в край как надо.

                                                        Я думаю, может поставить задержку в 10-20мс? Или как это решить? Чтобы пока не получены размеры окна — не выполнять if
                                                        1. Константин
                                                          Константин18 марта 2024, 10:31#
                                                          Не… Наверное, все-таки не так… При «входе» мыши, то есть когда mousemove пришел на первый пиксель #tooltip в него еще не загружен html и (наверное) winWidth = min-width из css, а height = 0. И только когда мышь переезжает на второй пиксель и далее — у #tooltip появляется содержимое.

                                                          ВЫХОД — сначала грузить в #tooltip содержимое и только потом получать document.getElementById('tooltip').offsetWidth;

                                                          Попробовал так:

                                                          $("#tooltip").html($data_tooltip)
                                                              .css({
                                                                "top" : posY,
                                                                "left" : posX
                                                              })
                                                              .show();
                                                          разбил на

                                                          $("#tooltip").html($data_tooltip);
                                                          и

                                                          $("#tooltip").css({
                                                                "top" : posY,
                                                                "left" : posX
                                                              })
                                                              .show();
                                                          И первую строчку переместил сразу после получения содержимого из атрибута

                                                          $data_tooltip = $(this).attr("data-tooltip");
                                                              $("#tooltip").html($data_tooltip);
                                                              var winWidth = document.getElementById('tooltip').offsetWidth;
                                                              var winHeight = document.getElementById('tooltip').offsetHeight;
                                                          Не помогло… Хотя — если ДОЛЖНО было помочь, может еще попробовать, может закешировалось что?

                                                      3. Константин
                                                        Константин18 марта 2024, 16:43#
                                                        Внесу поправку в первый вариант. Нужно в css явно указать font-weight

                                                        .real-hint {
                                                        	  font-weight: 200;
                                                        	  background-color: #fff;
                                                        	  border: 1px solid #aaa;
                                                        Ибо свойство наследуется от элемента, на котором кликнули — если там был болд, то внутри подсказки все, что вне стилей (просто текстом) будет тоже болд.
                                                        © REALADMIN.RU   2024 г.
                                                        Страница сгенерирована: 0,2202 s | 6 mb.
                                                        На каком уровне Вы играете в шахматы?
                                                        OPROS