Как закрепить всплывающую подсказку floatTip?

412
06 марта 2018, 05:55

Добрый день! Скачал пример всплывающей подсказки с форума, но беда в том, что она у меня прыгает (точнее мерцает) и двигается вправо-влево. Хотелось бы закрепить подсказку прямо на картинке и убрать мерцание.

<div class="box col3 smola"><div class="image"><img src="style/images/art/smola.jpg" alt="смола эпоксидная" onMouseOver="toolTip(event, '0,5кг - 80 грн.<br>1кг - 160 грн.<br>3кг - 155 грн.<br>5кг - 150 грн.<br>10кг - 145 грн...')" onMouseOut="toolTip('')"></div>
<form method="post" action="" class="jcart">
<p>Чешская <b>эпоксидная смола Epoxy-520</b> Прозрачный аналог ЭД-20, Тара от 0,5 кг. до бочки 235 кг.<br>
<a href="http://epoxy-polymer.in.ua/smola.html" target="_blank" class="button blue">Подробнее</a>
    <input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken']; ?>" />
    <input type="hidden" name="my_item_id" value="520" />
    <input type="hidden" name="my_item_name" value="эпоксидная смола Epoxy-520" />
    <input type="hidden" name="my_item_price" value="160.00" />
    <input type="hidden" name="my_item_unit" value="кг" />
    <input type="hidden" name="my_item_param" value="0.5=160|1=160|3=155|5=150|10=145|20=140|50=135" />
    <input type="hidden" name="my_item_qty" value="0.5" />
    <input type="hidden" name="my_item_size" value="0.1" />
    <input type="submit" name="my_add_button" value="Купить" class="button red " /></p></form></div>
    <style>
#floatTip {
    position: fixed; /* Абсолютное позиционирование */
    width: 150px; /* Ширина блока */
    display: none; /* Прячем от показа */
    border: 1px solid #666666; /* Параметры рамки */
    padding: 7px; /* Поля вокруг  текста */
    font-family: sans-serif; /* Рубленый шрифт */
    font-size: 12pt; /* Размер  шрифта */
    color: #333; /* Цвет текста */
    background: #ffffbb; /* Цвет фона */
    border-radius: 5px;
    box-shadow:10px 10px 5px 0px #F8F8FF;
    margin-top:0px;
}
</style>
<script>
document.onmousemove = moveTip;
function moveTip(e) {
  floatTipStyle = document.getElementById("floatTip").style;
  w = 160; // Ширина подсказки
  // Для браузера IE6-8
  if (document.all)  { 
    x = event.clientX + document.body.scrollLeft; 
    y = event.clientY + document.body.scrollTop; 
  // Для остальных браузеров
  } else   { 
    //x = 0; // Координата X курсора
    //y = 0; // Координата Y курсора
    x = e.pageX; // Координата X курсора
    y = e.pageY; // Координата Y курсора
  }
  // Показывать слой справа от курсора 
  if ((x + w + 10) < document.body.clientWidth) { 
    floatTipStyle.left = x + 'px';
  // Показывать слой слева от курсора
  } else { 
    floatTipStyle.left = x - w + 'px';
  }
  // Положение от  верхнего края окна браузера
     //floatTipStyle.top = y + 20 + 'px';
}
function toolTip(event, msg) {
  floatTipStyle = document.getElementById("floatTip").style;
  if (msg) {
    // Выводим текст подсказки
    document.getElementById("floatTip").innerHTML = msg;
    // Показываем подсказку
    floatTipStyle.display = "block";
  } else { 
    // Прячем подсказку
    floatTipStyle.display = "none";
  } 
}
</script>

Спасибо! Прошу прощения за неверное оформление вопроса! Ссылка на оригинал.

Answer 1

Самый простой вариант это сдвинуть подсказку так чтобы она не попадала под мышку. Тогда и по оси y её тоже нужно позиционировать чтобы она была например внизу от позиции мышки. И считая по стилю ширина подсказки у вас 150+2*7+2*1=165. Должно быть w = 165;

  // Показывать слой справа от курсора 
  if ((x + w + 10) < document.body.clientWidth) { 
    floatTipStyle.left = x + 10 + 'px';
  // Показывать слой слева от курсора
  } else { 
    floatTipStyle.left = x - w - 10 + 'px';
  }
  // Положение от  верхнего края окна браузера
     floatTipStyle.top = y + 20 + 'px';

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

READ ALSO
работа setTimeout()

работа setTimeout()

ЗдравствуйтеНе получается самостоятельно разобраться с setTimeout

230
Отсортировать статьи по дате

Отсортировать статьи по дате

Есть такой код, нужно отсортировать статьи по дате при нажатии на кнопку Sort by date, но без jQuery, всяких плагинов и тд

292
Как добавить outerHTML в куки?

Как добавить outerHTML в куки?

Как добавить HTML код определенных элементов в куки?Точнее есть генератор который при нажатии генерирует div элемент с рандомным цветом и в рандомный...

259
Организация JS кода с Webpack

Организация JS кода с Webpack

Есть сайтик на phpВстал вопрос организациии js

258