Позиция HTML-Tooltip относительно указателя мыши

Как выровнять подсказку по естественному стилю: правая нижняя часть указателя мыши?

<!DOCTYPE html>
<html>
<head>
  <title>Tooltip with Image</title>
  <meta charset="UTF-8">
  <style type="text/css">
    .tooltip {
        text-decoration:none;
        position:relative;
    }
     .tooltip span {
        display:none;
    }
     .tooltip span img {
        float:left;
    }
     .tooltip:hover span {
        display:block;
        position:absolute;
        overflow:hidden;
    }
  </style>
</head>
<body>
  <a class="tooltip" href="#" onclick="location.href='http://www.google.com/'; return false;">
    Google
    <span>
      <img alt="" src="http://www.google.com/images/srpr/logo4w.png">
    </span>
  </a>
</body>
</html>

Ответ 1

Для поведения всплывающей подсказки по умолчанию просто добавьте атрибут title. Однако это не может содержать изображения.

<div title="regular tooltip">Hover me</div>

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

jsFiddle

JavaScript

var tooltipSpan = document.getElementById('tooltip-span');

window.onmousemove = function (e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
};

CSS

.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:fixed;
    overflow:hidden;
}

Расширение для нескольких элементов

Одним из решений для нескольких элементов является обновление всей подсказки span и установка их под курсором на перемещение мыши.

jsFiddle

var tooltips = document.querySelectorAll('.tooltip span');

window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};

Ответ 2

Один из способов сделать это без JS - использовать действие при наведении курсора, чтобы открыть скрытый HTML-элемент, см. Этот код:

http://codepen.io/c0un7z3r0/pen/LZWXEw

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

ul#list_of_thrones li > span{
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  display:block;
  ...
}

Как вы можете видеть, диапазон скрыт, если элемент списка не находится над ним, и, таким образом, раскрыв элемент span, диапазон может содержать столько HTML, сколько вам нужно. В прилагаемом коде я также использовал элемент: after для стрелки, но он, конечно, не является обязательным и был включен в этот пример только для косметических целей.

Надеюсь, это поможет, я чувствовал себя обязанным опубликовать, так как все остальные ответы включали решения JS, но ОП попросил решение только для HTML/CSS.

Ответ 3

Вы можете использовать плагин jQuery UI, следующие ссылочные URL

Установить дорожку в TRUE для позиции подсказки относительно указателя мыши например.

$('.tooltip').tooltip({ track: true });

Ответ 4

Я предпочитаю эту технику:

function showTooltip(e) {
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}

.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .tooltip {
    display: block;
}

.tooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    color: black;
}

Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.

Ответ 5

Мы можем добиться того же, что и "Директива" в Angularjs.

            //Bind mousemove event to the element which will show tooltip
            $("#tooltip").mousemove(function(e) {
                //find X & Y coodrinates
                x = e.clientX,
                y = e.clientY;

                //Set tooltip position according to mouse position
                tooltipSpan.style.top = (y + 20) + 'px';
                tooltipSpan.style.left = (x + 20) + 'px';
            });

Вы можете проверить это сообщение для получения дополнительной информации. http://www.ufthelp.com/2014/12/Tooltip-Directive-AngularJS.html