0

十字アイコンの上部にツールチップウィンドウを表示しました... Firefoxで正常に動作しています。しかし、ツールチップの位置はChromeとIEブラウザで正しくなっています...

ここにデモがあります:-クロムまたはIEで開いてください...

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

});​

.tblRpt td{ padding:4px; color:#777;}
.tblServerInfo{border-collapse: collapse; font-size:13px; margin-top:10px;}
.tblServerInfo th{ background:#ececec; border:1px solid #ccc; padding:4px; text-shadow: 1px 1px 0px #fff; color:#666;border-collapse: collapse; line-height:30px; }
.tblServerInfo td{ border:1px solid #ccc; line-height:20px; padding:4px; text-shadow: 1px 1px 0px #fff; color:#666;border-collapse: collapse; text-align:center; }    
.tblServerInfo .feature{ color:#333; font-size:14px;  line-height:30px;  font-weight:bold; padding-left:10px; text-align:left; text-shadow: 1px 1px 0px #fff;}
.tblServerInfo .featureBody{ color:#333; font-size:13px;  line-height:25px;  padding-left:10px; text-align:left; }
.tblServerInfo .rw{background:#f5f5f5;}


/*--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;

    text-align:left; line-height:16px;
    position:absolute;    z-index:1000;
    text-decoration:none;
    cursor:auto;
    -moz-box-shadow: 2px 2px 5px #a2a2a2;-webkit-box-shadow: 2px 2px 5px #a2a2a2;box-shadow: 2px 2px 5px #a2a2a2;
}    
.tblScroll
{ 
    width: 85%;
    overflow:auto;  
    padding-bottom:1px;
}    ​


<div class="tblScroll fLeft">
                    <table class="tblServerInfo">
                       <tbody>
                        <tr style="background:#f5f5f5; line-height:40px; height:39px;">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr class="rw">
                            <td></td>
                            <td><<img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <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>
                            <td></td>
                        </tr>
                        <tr class="rw">
                            <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>
                            <td></td>
                            <td></td>
                            <td></td>
                            <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...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <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>
                            <td></td>
                            <td></td>
                            <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>
                        </tr>
                        <tr class="rw">
                            <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>
                            <td></td>
                            <td></td>
                            <td></td>
                            <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...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <td></td>
                            <td></td>
                            <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>
                            <td></td>
                            <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>
                        </tr>
                        <tr class="rw">
                            <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>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="images/cross-icon.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="images/cross-icon.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="images/cross-icon.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <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>

                        </tr>

                       </tbody>
                    </table>
                    </div>
4

1 に答える 1

1

絶対配置要素は、配置コンテキストを持つ最も近い親に従って配置されます。存在しない場合は、本体に従って配置されます。

ホバリングされた td を基準にしてツールチップを配置する必要があるため、 に追加position:relativeしtdて js を少し変更する必要があります。

td{
 position: relative;   
}​

 $(".tip_trigger").hover(function () {
                    tip = $(this).find('.tip');
                    tip.css('top','-40px').show(); //Show tooltip
                }

こちらをご覧ください。

これは完璧ではありませんが、必要な方向性です。

于 2012-11-29T11:41:08.150 に答える