Фиксированное положение изображения всплывающей подсказки

Я искал эту тему, и хотя я нашел похожие ситуации, я не смог применить ее к своим конкретным потребностям. У меня есть плагин для сайта WordPress, который позволяет мне отображать изображение в виде всплывающей подсказки при наведении ссылки. Он работает отлично, единственная проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы каждая всплывающая подсказка изображения имела фиксированную позицию на странице, которая не меняется независимо от местоположения мыши/ссылки при наведении. Прямо сейчас всплывающая подсказка следует за мышью по любой ссылке, которую я выбираю. Для справки, я пытаюсь использовать его как изображения при наведении на этот сайт: http://www.themorrisongallery.com/artists.html, где есть стационарное фиксированное место, которое показывает изображение при наведении курсора.

Это подключаемый модуль, который я использую: http://smartcatdesign.net/wp-tooltip-with-images-free-wordpress-plugin/

Вот как сейчас выглядит CSS:

.sc-tooltip-wrapper{
width: auto;
height: auto;
float: right;
margin: 0px;
background: #ffffff;
color: #333333;
z-index: 9999;
display: none;
overflow: hidden;
position: absolute;
top: -50px;



.sc-tooltip-wrapper img{
float: right;
width: auto;
height: auto;
position: relative;

и вот как выглядит скрипт:

jQuery(document).ready(function($) {
var ctr = 0;
$('.sc-tooltip').each(function() {

    ctr++;
    var tooltips = '<div id="sc-tooltip' + ctr + '-box" class="sc-tooltip-wrapper"><img src="' + $(this).attr('data-image') + '"/></div>';
    $('body').append(tooltips);
    $(this).attr('id', 'sc-tooltip' + ctr);
});
$('.sc-tooltip').hover(function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var theId = '#' + $(this).attr('id') + '-box';
    var leftOfset = $(theId).width();
    $(theId).css({'left': x, 'top': y});
    $(theId).fadeIn(200);
}, function() {
    var theId = '#' + $(this).attr('id') + '-box';
    $(theId).fadeOut(100);
});

любые предложения будут очень признательны! Я пытался установить фиксированную позицию с помощью css и атрибутов «верхний» и «левый», но каждый раз, когда я это делаю, изображение просто полностью исчезает со страницы.


wordpress jquery css jquery-hover jquery-tooltip
person neptune    schedule 25.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле вы не хотите получить изображение position: fixed, тогда оно не будет прокручиваться вместе со страницей...

Попробуйте этот CSS:

.sc-tooltip-wrapper{
    width: auto;
    height: auto;
    float: right;
    margin: 0px;
    background: #ffffff;
    color: #333333;
    z-index: 9999;
    display: none;
    overflow: hidden;
    position: absolute;
    top: 100px; /* Set the position you want here */
    left: 100px; /* Set the position you want here */
}

.sc-tooltip-wrapper img{
    float: right;
    width: auto;
    height: auto;
    position: relative;
}

И этот джаваскрипт:

jQuery(document).ready(function($) {
var ctr = 0;
$('.sc-tooltip').each(function() {

    ctr++;
    var tooltips = '<div id="sc-tooltip' + ctr + '-box" class="sc-tooltip-wrapper"><img src="' + $(this).attr('data-image') + '"/></div>';
    $('body').append(tooltips);
    $(this).attr('id', 'sc-tooltip' + ctr);
});
$('.sc-tooltip').hover(function(e) {
    //var x = e.pageX;
    //var y = e.pageY;
    //var theId = '#' + $(this).attr('id') + '-box';
    //var leftOfset = $(theId).width();
    //$(theId).css({'left': x, 'top': y});
    //$(theId).fadeIn(200); // Nice effect...
    $(theId).show(); // But this makes it more like your example
}, function() {
    var theId = '#' + $(this).attr('id') + '-box';
    //$(theId).fadeOut(100); // Nice effect...
    $(theId).hide(); // But this makes it more like your example
});

Что я сделал, так это просто запретил javascript обновлять положение изображений при наведении курсора на ссылку. Он остается в положении, установленном в CSS.

Кроме того, изменены $(theId).fadeIn(100); на $(theId).show(); и $(theId).fadeOut(100); на $(theId).hide();, чтобы сделать поведение более похожим на пример, который вы связали. Я бы предположил, что оригинал немного мягче и приятнее, просто хотел дать вам выбор!

person Niklas    schedule 25.07.2014
comment
Большое спасибо за ваш ответ. Я изменил как CSS, так и javascript так, как вы предоставили, однако я вообще не вижу изображения, когда нахожусь над ссылками. Я играл с различными значениями для css top: 500px и left: 500px и безуспешно. Какие-либо предложения? - person neptune; 26.07.2014
comment
Трудно не видеть настоящую страницу. Он есть в сети, можно ссылку? - person Niklas; 26.07.2014
comment
Спасибо за ссылку, очень помогли! Похоже, вы забыли закомментировать строку $(theId).css({'left': x, 'top': y});, как в моем ответе, выдав ошибку. - person Niklas; 27.07.2014
comment
Кроме того, я заметил еще одну ошибку в консоли: вы забыли закрыть тег скрипта вокруг своего кода отслеживания Google Analytics: <p><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga');</script></p>. - person Niklas; 27.07.2014
comment
Большое спасибо, теперь все работает и работает отлично! Я очень ценю вашу помощь!! :) - person neptune; 29.07.2014