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

できることの 1 つは、「ツールヒント」のコンテンツを表示したい場所 (必要な可視性と書式設定が既にある場所) に入れ替えるだけです。

このアプローチは、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 でフッツアップを開始することもできます。これは、最終的に既存のライブラリの 1 つを使用/適応するように駆り立てられる十分な悪い経験になるはずです。

于 2014-02-26T18:21:40.677 に答える