Question

我正在使用jQuery和CSS为一些内容创建工具提示。它的工作原理应该是工具提示出现在mouseenter上并在mouseleave上消失。我的问题在于我的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有关，因为当我删除该属性时，它会正确呈现，但这些项目会从其容器中流出。我该如何解决这个问题？

Answer 1

嗯，我知道这不会直接回答你的问题，但你看过现有的工具提示库，比如Twitter的Bootstrap，例如：http://twitter.github.com/bootstrap/javascript.html#tooltips

我说这个的原因是因为，我宁愿花时间研究我的应用程序的核心，而不是试图重新发明轮子。除非，你确实在努力学习创建轮子的过程。这顺便也是好事。你也学到了很多东西。

Answer 2

您可以做的一件事就是将“工具提示”内容交换到您想要显示它的位置（已经具有您想要的可见性和格式）。

此方法将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层，这应该是一种糟糕的体验，您最终会被驱使使用/调整其中一个现有的库。

css溢出问题

2 个答案: