0

アイコンの上部にツールチップウィンドウまたはdivを表示する必要があります...高さを固定していません。テキストが4行を超える場合は、十字アイコンをカバーしています...これ がデモです

ここに画像の説明を入力してください

    /*--Tooltip Styles--*/
    .tip_trigger{display:block; padding:6px;}
    .tip {
        color: #333;
        background:#ffffff;
        border:1px solid #747474;
        display:none; /*--Hides by default--*/
        padding:10px;
        margin-left:-143px;
        margin-top:-50px;
        text-align:left; line-height:16px;
        position:absolute;  z-index:1000;
        cursor:auto;
        -moz-box-shadow: 2px 2px 5px #D3D3D3;-webkit-box-shadow: 2px 2px 5px #D3D3D3;box-shadow: 2px 2px 5px #D3D3D3;
    }   

 /*--jQuery --*/

     $(document).ready(function () {
            //Tooltips
            $(".tip_trigger").hover(function () {
                tip = $(this).find('.tip');
                tip.show(); //Show tooltip
            }, function () {
                tip.hide(); //Hide tooltip        
            })

        });

/*  HTML:- --------*/

    <td>
     <a class="tip_trigger">
      <img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
      <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
    </a>
    </td>
4

2 に答える 2

1

それがあなたが探しているものかどうかはわかりませんが、誰が知っていますか：

http://jsfiddle.net/Sbqtv/8/

$(document).ready(function () {
                //Tooltips
                $(".tip_trigger").hover(function () {
                    tip = $(this).find('.tip');
                    tip.show().css('margin-top',-tip.height()); //Show tooltip
                }, function () {
                    tip.hide(); //Hide tooltip          
                })

            });​
于 2012-11-23T09:54:31.763 に答える
1

ここにあなたが探しているものがあります： http://jsfiddle.net/Sbqtv/7/

position:relativeあなたのプロパティを追加してから、クラスにプロパティとプロパティを.tip_trigger追加しました。（画像の高さと幅を考慮して）bottomright.tip

チップの高さがどれになるかわからないため、相対的な位置 (上、下、左、右) で作業する必要があります。マージンを使用しない:

.tip_trigger{
    display:block;
    padding:6px; 
    position:relative;
}
.tip {
    color: #333;
    background:#ffffff;
    border:1px solid #747474;
    display:none; /*--Hides by default--*/
    padding:10px;
    text-align:left;
    line-height:16px;
    bottom:50px;
    right:0;
    position:absolute;    z-index:1000;
    cursor:auto;
    -moz-box-shadow: 2px 2px 5px #D3D3D3;
    -webkit-box-shadow: 2px 2px 5px #D3D3D3;
    box-shadow: 2px 2px 5px #D3D3D3;
}

</p>

しかし、下の画像の 1 つの先端が上の画像を隠してしまうと、別の問題が発生します。

于 2012-11-23T09:56:29.977 に答える