A в то время как go Я использовал код по ссылке http://www.jquerybyexample.net/2012/09/tutorial-for-creating-simple-stylized-tooltip-using-jquery.html, чтобы создать подсказку, которая следует за мышью при наведении курсора на виджет, для которого включена подсказка. Это было до того, как действительно вышло HTML5, которое поддерживает всплывающие подсказки, но не совсем так, как я хочу.
В любом случае, код имеет смещения x и y от мыши, жестко запрограммированные, так что x- смещение на 20 пикселей вправо, а смещение по оси y на 10 пикселей выше от мыши и следует за мышью над виджетом. Обычно это нормально, но когда виджет находится справа от окна, это может быть проблемой. Конечно, хотя я могу жестко запрограммировать любые значения, я хочу иметь возможность указывать смещения в коде HTML.
Я в процессе обновления своего веб-сайта и размещения его на новом сервере. Исходная страница по-прежнему находится по ссылке http://cs-cubed.com: 8080 / и использует эту функцию (во избежание коллизии портов она теперь находится на порте 8080). Вы можете навести курсор мыши на элементы ниже зеленой линии, чтобы увидеть это. Зеленый счетчик посещений не работает, и эта страница больше не поддерживается.
Новая страница находится по ссылке https://cs-cubed.com/ (обратите внимание, что сертификат SSL еще не установлен) использует модифицированный код jQuery:
$(function() {
$('.tool-tip').hover(function(event) {
var toolTip = $(this).attr('tlp');
var offy = $(this).attr('offy'); // Line added
var offx = $(this).attr('offx'); // Line added
if (typeof offy === 'undefined') offy = -10; // If no offset is given use this default
if (typeof offx === 'undefined') offx = 20; // If no offset is given use this default
$('<span class="tooltip"></span>').text(toolTip)
.appendTo('body')
.css('top', (event.pageY + offy) + 'px') // Replace the hard code by offy
.css('left', (event.pageX + offx) + 'px') // Replace the hard code by offx
.fadeIn('slow');
}, function() {
$('.tooltip').remove();
}).mousemove(function(event) {
$('.tooltip')
.css('top', (event.pageY + offy) + 'px') // Replace the hard code by offy
.css('left', (event.pageX + offx) + 'px');// Replace the hard code by offx
});
});
Затем, например, для всплывающей подсказки для кнопки «Обновить журнал» в правом нижнем углу на новой странице у меня есть следующий код HTML:
<div class="box j">
<input id="update-log" class="btn tool-tip" tlp="Click on this button to see the update log. If the last
update in the log does not match the date at the bottom here, you may need to refresh your browser by
entering cs-cubed.com/update-log.html and refrshing the browser."
type="button" value="Update Log" />
</div>
с использованием модифицированного кода jQuery. Это все еще работает до тех пор, пока я не добавлю offx и offy в качестве атрибутов в коде HTML, поэтому они не определены в коде jQuery и используются значения по умолчанию. Однако подсказка не следует за мышью, когда она перемещается над виджетом.
Гораздо серьезнее то, что попытки включить атрибуты offx и / или offy в код HTML не работают. Например, я хочу что-то вроде:
<div class="box j">
<input id="update-log" class="btn tool-tip" offx="-20" offy="5" tlp="Click on this ..."
type="button" value="Update Log" />
</div>
для всплывающей подсказки для кнопки, со смещениями, заданными как атрибуты offx и offy, но либо ничего не отображается, либо подсказка появляется в совершенно другой части страницы.
Все исследования, которые я провел в Интернете, не смогли найти решение этой проблемы, и были бы очень признательны, если бы выяснили, как решить эту проблему. Это должно быть связано с тем, что с измененным кодом jQuery подсказка не следует за мышью над виджетом, когда смещения остаются пустыми.