툴팁 이미지 고정 위치 설정

Question

이 주제를 검색했으며 유사한 상황을 발견했지만 특정 요구 사항에 적용 할 수 없었습니다. 나는 링크 호버에 툴팁으로 이미지를 표시 할 수있는 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를 사용하여 고정 된 위치를 설정하고 '상단'및 '왼쪽'속성을 사용하려고 시도했지만 매번 그 이미지가 페이지에서 완전히 사라지는 경우가 있습니다.

Answer 1

당신은 실제로 다음은

이 CSS 시도 ... 페이지로 이동하지 않을 이미지 position: fixed을 얻을 찾고하지 않을 :

.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 
}); 

내가 한 것은 아주 간단하게 링크를 가리키면 이미지 위치를 업데이트하는 자바 스크립트를 멈추는 것입니다. CSS에 설정된 위치에 그대로 있습니다.

또한 $(theId).fadeIn(100);을 $(theId).show(); 및 $(theId).fadeOut(100);에서 $(theId).hide();으로 변경하여 링크 된 예와 비슷한 동작을 보입니다. 나는 원판이 좀 더 부드럽고 부드럽고 멋지다고 생각할 것이다. 단지 선택의 여지를주고 싶었다.