0

我正在使用 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;on 有关，#allInvTable因为当我删除该属性时，它会正确呈现，但项目会从它们的容器中流出。我该如何解决？

4

2 回答 2

1

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

我之所以这么说是因为，我宁愿花时间在我的应用程序的核心上，也不愿尝试重新发明轮子。除非，您确实在尝试学习创建轮子的过程。顺便说一句，这也很好。这样你也能学到很多。

于 2012-07-09T06:02:01.120 回答
0

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

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

于 2014-02-26T18:21:40.677 回答