CSS 오버 플로우 문제

jQuery 및 CSS를 사용하여 일부 콘텐츠에 대한 툴팁을 만드는 중입니다. 툴팁이 마우스 포인트에 나타나고 마우스를 놓을 때 툴팁이 사라져야하는 것처럼 작동합니다. 내 문제는 내 CSS 레이아웃 내에있다.CSS 오버 플로우 문제

HTML :

<div id="allInvTable"> 
    <div class="invItmCont" style="border-bottom:1px solid white;"> 
     <div class="invItmItm">An Item</div> 
     <div class="invItmStats" style="display:none;"> 
      <div style="clear:both;"> 
       ...Some content here... 
      </div> 
      <span style="display: none; top: -90px;"> 
       <div style="clear:both;"> 
        ...The same content placed here via jquery to display as the tooltip... 
       </div> 
      </span> 
     </div> 
    </div> 
</div>

CSS :

#allInvTable { 
    overflow:auto; 
} 

.invItmCont { 
    text-decoration:none; 
    display:block; 
    float:left; 
    padding:0 15px; 
    text-align:center; 
    position:relative; 
    clear: both; 
} 

.invItmCont span { 
    background-color: #000; 
    border: 5px solid #826217; 
    border-radius:15px; 
    -moz-border-radius:15px; 
    -o-border-radius:15px; 
    -webkit-border-radius:15px; 
    -moz-box-shadow: 2px 2px 2px #000; 
    -webkit-box-shadow: 2px 2px 2px #000; 
    box-shadow: 2px 2px 2px #000; 
    width:200px; 
    height:auto; 
    position:absolute; 
    display:none; 
    top:-90px; 
    color:#fff; 
    left:-37px; 

}

단지 참고로 JQuery와 :

툴팁가 페이지에 렌더링 될 때, 그것은 부모의 높이를 수축

<script> 
    $("#allInvTable div.invItmCont").append("<span></span>"); 
    $("#allInvTable div.invItmCont").hover(function() { 
     $(this).find("span").animate({opacity:"show", top: "-70"}, "slow"); 
     var itmStat = $(".invItmStats", this).html(); 
     $(this).find("span").html(itmStat); 
    }, 
    function() { 
     $(this).find("span").animate({opacity:"hide", top: "-90"}, "fast"); 
    }); 
</script>

overflow:auto;#allInvTable과 관련이 있다는 것을 알고 있습니다. 해당 속성을 이동하면 올바르게 렌더링되지만 항목은 해당 컨테이너에서 유출됩니다. 이 문제를 어떻게 해결할 수 있습니까?

출처

2012-07-09 chaoskreator

작동중인 jsfiddle을 제공 할 수 있습니까? – Conner

@Conner 실제로, 아니오,하지만 여기에 설치 링크가 있습니다 : http://jsfiddle.net/mgtKD/ – chaoskreator

음, 난이 직접 질문에 대한 답변하지 않습니다 알아,하지만 당신은 예를 들어 트위터의 부트 스트랩과 같은 기존의 툴팁 도서관에서 보았다 : http://twitter.github.com/bootstrap/javascript.html#tooltips

내가 아니라 작업 시간을 보낼 것 때문이라고 이유 바퀴를 다시 발명하려고 시도하는 것보다 내 앱의 핵심에 않는 한, 당신은 정말로 처음부터 바퀴를 만드는 과정을 배우려고합니다. 그건 또 좋은거야. 그렇게 많이 배웁니다.

출처

2012-07-09 06:02:01 ErJab

몇 가지 "플러그인"을 들여다 보았지만 그 중 아무 것도 내 목적에 부합하지 못했고 대부분은 너무 과장되었습니다 내가 필요한 것. 그리고, 그렇습니다. 제 자신을 코딩하는 것이 jQuery와 CSS를 좀 더 잘 이해할 수 있다고 생각합니다. (CSS에는 정통하지만 jQuery에는 익숙하지 않습니다 ... 저는 PHP 사용자입니다.) – chaoskreator

당신이 할 수있는 일 중 하나는 "툴팁"콘텐츠를 표시하고자하는 장소 (이미 원하는 가시성과 서식을 가지고 있음)로 바꾸는 것입니다.

이 접근 방식은 content : stash와 같은 display : none 요소를 처리합니다.

$("#allInvTable div.invItmCont") 
.hover(function() { 
    var outgoing = $(".invItmItm", this).html(); 
    var incoming = $(".invItmStats", this).html(); 
    $(".invItmItm", this).html(incoming); 
    $(".invItmStats", this).html(outgoing); 
    }, function() { 
    var outgoing = $(".invItmItm", this).html(); 
    var incoming = $(".invItmStats", this).html(); 
    $(".invItmItm", this).html(incoming); 
    $(".invItmStats", this).html(outgoing); 
    } 
);

참조 : http://jsfiddle.net/zatz/mgtKD/6/

또는, 당신은 당신이 궁극적/사용하는 기존 라이브러리 중 하나를 적응 구동되는 나쁜 경험이 충분해야 Z-층을 가지고 작업을 시작할 수 있습니다.

출처

2014-02-26 18:21:40

CSS 오버 플로우 문제

답변

관련 문제