超級簡單的CSS工具提示在表中，爲什麼它不顯示，我可以使它工作？

我一直在嘗試在本頁面上爲我的客戶實施許多不同的工具提示，他堅持要求我們在產品名稱在訂單頁面上懸停時顯示產品圖片。我決定使用超級簡單的CSS工具提示，它很容易實現，並且完全符合我們的要求。它在一個動態頁面上工作，我嘗試過的其他人沒有。超級簡單的CSS工具提示在表中，爲什麼它不顯示，我可以使它工作？

我在這裏做了一個例子：CSS tooltip in table example。 < - 已更新，以消除錯誤。

HTML：

<table class="mytable" id="cart"> 

    <tr id="titles"> 
    <th id="varekodetext">Varekode</th> 
    <th id="produkttext">Produkt</th> 
    <th id="pristext">Pris</th> 
    <th id="emptee">&nbsp;</th> 
    <th id="antalltext">Antall</th> 
    <th id="pristotaltext">Pris Total</th> 
    <th id="sletttext">Slett</th> 
    </tr> 
    <tbody> 
    <tr class="even first" id="topborder" height="40px"> 
     <td class="cart2Varekode"> <span>39261-02 </span> 
     </td> 
     <td class="cart2Produkt"> <a href="/Plantronics-CS361N.11" target="_blank" class="tooltip" title="Plantronics CS361N"> 
       Plantronics CS361N 
       <span> 
        <img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg" alt="Plantronics CS361N" /> 

       </span> 
       </a> 
     <p> 
     </p> 
     </td> 
     <td class="cart2Price"> 
     <span class="actualPrice">2390.-</span> 
     </td> 
     <td class="cart2Salg"> 
     <span class="orderlistPrice"></span> 
     </td> 
     <td class="antallbox"> 
     <span class="cartQuant"><input name="item_1363" class="DG-spinner" id="text" type="text" value="1"/> <span class="cartUpdate"><button type="submit" class="submit" id="rfrsh_btn" name="saveFields" title="Oppdater" value="">&nbsp;</button></span> 
     </span> 
     </td> 
     <td class="cart2Total"> 
     <span class="basePrice">2390.-</span><span class="actualPrice">2390.-</span> 
     </td> 
     <td class="delete"> 
     <a class="slett" href="../..//order/delete/1363?return=" title="Slett">Remove</a> 
     </td> 
    </tr> 
    <tr class="odd last" id="topborder" height="40px"> 
     <td class="cart2Varekode"> <span>7050-20</span> 
     </td> 
     <td class="cart2Produkt"> <a href="/Target-7050CC-Duo-UNC.7" target="_blank" class="tooltip" title="Target 7050CC Duo UNC">Target 7050CC Duo UNC<span> 
     <img src="upload/productimage/7-250-2.jpg?1251022192" alt="Target 7050CC Duo UNC" />    
       </span> 
       </a> 

     <p> 
      <div class="productOptions" style="color:#b2b2b2;"> 

      <div class="nonEditableOption"> 
       Skal tilkobles: Alcatel IP Touch 
      </div> 

      <div class="productOptionsMenu"> 
       <a style="color:#6c8aa2;" href="/order/options/1377" ajax="/order/optionForm/1377">Endre valg</a> 
      </div> 
      </div> 

     </p> 

     </td> 
     <td class="cart2Price"><span class="actualPrice">899.-</span> 
     </td> 
     <td class="cart2Salg"> 
     <span class="salg" title="Rabatt">&nbsp;</span> 

     <span class="orderlistPrice" title="Opprinnelige prisen"> 
        (1599.-) 
       </span> 
     </td> 
     <td class="antallbox"> 
     <span class="cartQuant"><input name="item_1377" class="DG-spinner" id="text" type="text" value="1"/> 

        <span class="cartUpdate"><button type="submit" class="submit" id="rfrsh_btn" name="saveFields" title="Oppdater" value="">&nbsp;</button></span> 
     </span> 
     </td> 


     <td class="cart2Total"> 

     <span class="basePrice">899.-</span><span class="actualPrice">899.-</span> 

     </td> 
     <td class="delete"> 

     <a class="slett" href="../..//order/delete/1377?return=" title="Slett">Remove</a> 

     </td> 
    </tr> 
    <tr> 
     <td colspan="6" class="cols-six"></td> 
    </tr> 
    <tr id="topborder-tr"> 
     <td class="subTotalCaption2">&nbsp;</td> 
     <td colspan="4" class="subTotalCaption2">Mva (25%):</td> 
     <td class="amount taxAmount2">822.-</td> 
     <td>&nbsp;</td> 



    </tr> 
    <tr> 
     <td class="subTotalCaption2">&nbsp;</td> 
     <td colspan="4" class="subTotalCaption2">Totalt:</td> 
     <td class="subTotal2">4111.-</td> 
     <td>&nbsp;</td> 

    </tr> 
    <tr> 
     <td colspan="5"></td> 
     <td class="cartQuant"></td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td colspan="7"> 
     <a href="/" class="continueShopping"><span>&nbsp;</span></a> 
     <div class="checkoutButtons"> 
      <a href="/checkout" class="proceedToCheckout" onclick="return Order.submitCartForm(this);"><span>&nbsp;</span></a> 

     </div> 
     </td> 
    </tr> 
    <script type="text/javascript"> 
     new Order.OptionLoader($('cart')); 

    </script> 

    </tbody> 

</table>

CSS：

.cart2Produkt a:hover { 
    background: #ffffff; 
    text-decoration: none; 
    z-index: 999; 
} 

/*BG color is a must for IE6*/ 

.tooltip { 
    text-align: left; 
} 

.cart2Produkt a.tooltip span { 
    z-index: 999; 
    display: block; 
    position: absolute; 
    left: -999px; 
    opacity: 0; 
    padding: 2px 3px; 
    margin-left: 8px; 
    width: 130px; 
    -webkit-transition: opacity; 
    -webkit-transition-timing-function: ease-in; 
    -webkit-transition-duration: 500ms; 
} 

.cart2Produkt a.tooltip:hover span { 
    z-index: 999; 
    display: block; 
    position: absolute; 
    right: 50%; 
    opacity: 1; 
    background: #ffffff; 
    border: 1px solid #cccccc; 
    color: #6c6c6c; 
    top: -35px; 
    left: -15px; 
    z-index: 10; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    text-align: center; 
    vertical-align: middle; 
    padding: 1px; 
    -webkit-transition: opacity; 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
} 


/**************IGNORE BELOW*************/ 

#topborder { 
    /*border-top: 1px #ccc solid;*/ 
    padding-bottom: 10px; 
} 

#topborder-tr { 
    border-top: 1px #ccc solid; 
} 

.mytable { 
    width: 100%; 
    margin-bottom: 20px; 
} 

.mytable, 
.mytable th, 
.mytable tr, 
.mytable td { 
    border: 0; 
    letter-spacing: 1px; 
} 

.mytableborders, 
.mytableborders th, 
.mytableborders tr, 
.mytableborders td { 
    border: 1px #ccc solid; 
    /*width:670px;*/ 
} 

.mytable td, 
.mytable td span { 
    padding-bottom: 0; 
    padding-top: 5px; 
    /*border-top: 1px #ccc solid;*/ 
    vertical-align: middle; 
    font-size: 12px; 
} 

.mytable th { 
    vertical-align: bottom; 
    height: 30px; 
    padding-bottom: 5px; 
} 

#titles { 
    margin: 0px auto 0px auto; 
    width: 100%; 
    padding-bottom: 50px; 
    z-index: 1; 
    border: 1px #ccc solid; 
    border-left: none; 
    border-right: none; 
} 

.cart2Produkt a { 
    color: #0a5692; 
    text-decoration: none; 
    line-height: 15px; 
    clear: both; 
    z-index: 999; 
} 

productOptionsMenu { 
    clear: both; 
} 

#pristotaltext p, 
#varekodetext p, 
#sletttext p, 
#pristext p, 
#antalltext p, 
#produkttext p { 
    font: 12px/11px "Helvetica"; 
    margin: 0px; 
    color: #828273; 
    text-align: left; 
} 

#thinline, 
#thinlinecopy { 
    background: url(../../upload/thinline.png) no-repeat; 
    visibility: visible; 
    position: absolute; 
    left: 0px; 
    z-index: 4; 
    width: 747px; 
    height: 1px; 
} 

#thinlinefakt { 
    background: url(../../upload/thinline.png) no-repeat; 
    visibility: visible; 
    position: absolute; 
    top: 100px; 
    left: 0px; 
    z-index: 4; 
    width: 747px; 
    height: 1px; 
} 

#thinlinefakt2 { 
    background: url(../../upload/thinline.png) no-repeat; 
    background-position: bottom; 
    visibility: visible; 
    position: absolute; 
    top: 205px; 
    left: 0px; 
    z-index: 4; 
    width: 747px; 
    height: 28px; 
    margin: 5px; 
    margin-left: 10px; 
    margin-top: 0px; 
    padding: 5px; 
    color: #000000; 
    font-size: 22px; 
    font-family: "Helvetica"; 
} 

.Fadresse { 
    display: block; 
    margin: 5px; 
    padding: 0; 
    color: #000000; 
    font-size: 22px; 
    font-family: "Helvetica"; 
} 

#thinlinecopylever { 
    background: url(../../upload/thinline.png) no-repeat; 
    background-repeat: repeat-x; 
    position: relative; 
    left: 0px; 
    top: -3px; 
    width: 100%; 
    height: 1px; 
    padding: 0px; 
} 

#varekodetext { 
    width: 65px; 
    padding-left: 5px; 
    text-align: center; 
} 

#produkttext { 
    width: 150px; 
} 


/*#sgproductview { 

margin: 0px auto 0px auto; 
width: 595px; 
height:1%; 
z-index:1; 
}*/ 

#thinlinecopy { 
    top: 1px; 
} 

#antalltext { 
    width: 25px; 
    text-align: center; 
} 

#pristotaltext { 
    width: 10%; 
    text-align: right; 
} 

#sletttext { 
    width: 10%; 
    text-align: center; 
} 

#thinline { 
    top: 19px; 
    position: absolute; 
} 

#pristext { 
    width: 24px; 
    text-align: center; 
} 

#emptee { 
    background-color: none; 
    width: 40px; 
} 


/*****************************************CONTENT*/ 

.cart2Produkt p, 
.cart2Varekode p, 
.cart2Salg p { 
    font: 13px/11px "Helvetica"; 
    margin: 0px; 
    letter-spacing: 1px; 
    text-align: left; 
} 

.cart2Produkt p a { 
    color: #000000; 
} 

.cart2Total p { 
    font: 13px/11px "Helvetica"; 
    margin: 0px; 
    letter-spacing: 1px; 
    text-align: left; 
    color: #000000; 
} 

.cart2Varekode { 
    visibility: visible; 
    z-index: 2; 
    text-align: center; 
    vertical-align: top; 
    padding-top: 3px; 
    font-weight: bold; 
} 

.cart2Produkt { 
    visibility: visible; 
    text-decoration: none; 
    text-align: left; 
    position: relative; 
    width: 28%; 
    font-weight: bold; 
    padding-bottom: 2px; 
} 

.cart2Produkt a { 
    white-space: nowrap; 
} 

.cart2Price { 
    visibility: visible; 
    z-index: 2; 
    text-align: right; 
    width: 6%; 
    position: relative; 
    font-weight: bold; 
} 

.cart2Price p { 
    font: 13px/11px "Helvetica"; 
    margin: 0px; 
    letter-spacing: 1px; 
    text-align: right; 
    width: 80%; 
} 

.cart2Total p { 
    font-weight: bold; 
    text-align: right; 
} 

.cart2Salg p { 
    color: #B2B2B2; 
    width: 20%; 
} 

.cart2Total { 
    visibility: visible; 
    z-index: 2; 
    text-align: right; 
    font-weight: bold; 
} 

.antallbox { 
    white-space: nowrap; 
    text-align: center; 
} 

.antallbox input { 
    text-align: right; 
    outline: none; 
    width: 30px; 
} 

.antallbox input:focus { 
    text-align: right; 
    outline: none; 
    border: 1px #000 solid; 
    background-color: #F0F7FD; 
} 

.cartQuant { 
    width: 30px; 
    /* white-space: nowrap;*/ 
    text-align: left; 
    margin-top: 5px; 
} 

.cart2Salg { 
    visibility: visible; 
    z-index: 2; 
    padding: 0; 
    margin: 0; 
} 

.orderlistPrice { 
    text-decoration: line-through; 
    font-weight: bold; 
    color: #b2b2b2; 
    font-size: 12px; 
} 

.salg { 
    background: url(../../upload/salg.png) no-repeat; 
    visibility: visible; 
    z-index: 2; 
    width: 28px; 
    height: 24px; 
    display: inline-block; 
    position: relative; 
} 

.delete { 
    visibility: visible; 
    z-index: 2; 
    height: 21px; 
    background: none; 
    text-align: center; 
} 

.slett { 
    width: 24px; 
    height: 19px; 
    background-image: url(../../upload/delete_box_sprite.png); 
    background-position: 0 0; 
    text-decoration: none; 
    display: inline-block; 
} 

.slett:hover { 
    width: 24px; 
    height: 19px; 
    background-image: url(../../upload/delete_box_sprite.png); 
    background-position: -24px 0; 
    text-decoration: none; 
    display: inline-block; 
} 

.productOptions { 
    background-color: #fff; 
    postion: absolute; 
    visibility: visible; 
    display: block; 
    top: 3px; 
    padding-left: 5px; 
    padding-bottom: 10px; 
} 

.nonEditableOption { 
    background-color: #fff; 
    float: left; 
    postion: absolute; 
    margin-right: 10px; 
    visibility: visible; 
    display: block; 
}

習慣使用的div顯示此頁面，因爲我已經改成了一個表，它是表格數據，更容易跟...共事。當它使用div時它工作得很好，現在它在一個表中，它不會在懸停時顯示跨度。

我的問題是：

爲什麼不工作？
我該如何讓它工作？
如果沒有，是否有人知道另一個超級易於實現的工具提示可以在動態頁面上正常工作？

以下是供參考的DIV工具提示：DIV display tooltip。

HTML：

<div id="JSwrap"> 
    <div id="cart2Produkt"> 
     <p><a href="/Target-7050-Softphone-USB-Duo.220" target="_blank" class="tooltip" title="Target 7050 Softphone USB Duo ">Target 7050 Softphone USB Duo 
    <span><img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg?1251413379" alt="Target 7050 Softphone USB Duo " /> 
<br /> 
    </span> 
</a> 
     </p> 
    </div> 
</div>

CSS：

#JSwrap { 
    /*for jsfiddle only*/ 
    position: absolute; 
    left: 100px; 
    top: 50px; 
} 

#cart2Produkt { 
    border: 1px solid #ccc; 
    width: 500px; 
    text-align: left; 
    padding: 10px; 
} 

#cart2Produkt a.tooltip span { 
    z-index: 999; 
    display: block; 
    position: absolute; 
    left: -999px; 
    opacity: 0; 
    padding: 2px 3px; 
    margin-left: 8px; 
    width: 130px; 
    -webkit-transition: opacity; 
    -webkit-transition-timing-function: ease-in; 
    -webkit-transition-duration: 500ms; 
} 

#cart2Produkt a.tooltip:hover span { 
    z-index: 999; 
    display: block; 
    position: absolute; 
    right: 50%; 
    opacity: 1; 
    background: #ffffff; 
    border: 1px solid #cccccc; 
    color: #6c6c6c; 
    top: -35px; 
    left: -15px; 
    z-index: 10; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    text-align: center; 
    vertical-align: middle; 
    padding: 1px; 
    -webkit-transition: opacity; 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
} 

#cart2Produkt img { 
    z-index: 999; 
}

編輯：只注意到它的一半工作在IE8。

更新：由於Daniel指出我的CSS錯誤，它現在可以在所有瀏覽器中工作，但是有沒有辦法讓它顯示在表格單元之外？

來源

2010-04-29 Kyle

如果將跨度顯示爲塊，以便始終可見，則圖像是否顯示？（我無法得到它） – Tom 2010-04-29 09:24:13

它已經設置爲阻止，我試過'內聯塊'也，這沒有工作.. – Kyle 2010-04-29 09:29:54

找到一個更可讀的工作液here：

.cart { width: 100%; } 
 

 
.hasTooltip span { 
 
    display: none; 
 
    color: #000; 
 
    text-decoration: none; 
 
    padding: 3px; 
 
} 
 

 
.hasTooltip:hover span { 
 
    display: block; 
 
    position: absolute; 
 
    background-color: #FFF; 
 
    border: 1px solid #CCC; 
 
    margin: 2px 10px; 
 
}

<table class="cart"> 
 
    <tr> 
 
     <th id="pos">Pos</th> 
 
     <th id="name">Product</th> 
 
     <th id="price">Price</th> 
 
    </tr> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td> 
 
       <a href="productdetails.htm" class="hasTooltip">Flatscreen 
 
        <span>New visual experience!</span> 
 
       </a> 
 
      </td> 
 
      <td>19.99</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td> 
 
       <a href="productdetails.htm" class="hasTooltip">Headset 
 
        <span>Inject music directly into your ears!</span> 
 
       </a> 
 
      </td> 
 
      <td>19.99</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

來源

2010-04-29 09:39:19 stefanglase

這看起來很有幫助+1 – 2010-04-29 09:41:05

非常有幫助！比我的版本更簡單:) +1 – Kyle 2010-04-29 09:44:40

我將此添加到我的網站，與我以前的版本一樣，只顯示錶格單元的範圍內的跨度。是否有方法可以覆蓋此？讓它在這裏工作：http://jsfiddle.net/Mcv7P/ 只是不在我的實際網站.. – Kyle 2010-04-29 09:47:14

我檢查了你的代碼，正如你可以通過jsfiddle sytax hightlighting所看到的那樣，代碼中有很多錯誤：例如，你在a中開始的跨度在a之外完成。 CSS應該像這樣工作。還有一些錯誤。我想如果你改正他們的工作。（只需通過w3c檢查，然後任何事情應該是很好）

編輯：我錯過了一件事你的鏈接應該是位置：親戚;因爲你的工具提示是位置：絕對的，絕對總是相對於最後一個相對父母。

也刪除不透明度：0在原始跨度

來源

2010-04-29 09:25:00 meo

謝謝，我已經清理了這些錯誤，但仍然沒有。 – Kyle 2010-04-29 09:28:08

我編輯了我的答案 – meo 2010-04-29 09:30:36

更改定位，仍然無法正常工作。還有一半在IE8中工作，它顯示隱藏的跨度，但只在表格單元的範圍內。 – Kyle 2010-04-29 09:32:39

你似乎有與CSS問題。簡單地使用工作的JSFiddle演示樣式應該修復它。您將跨度設置爲display:none，但通過使用left:-999px隱藏圖像，該工具提示看起來像是工作提示。

檢查：http://jsfiddle.net/WNzhJ/

來源

2010-04-29 09:33:05

謝謝達米爾，我確實試着讓樣式一樣。 – Kyle 2010-04-29 09:36:26

體面的例子，但有點複雜。 – 2017-10-06 23:49:31

我想同樣的事情，試圖讓一個CSS工具提示出現的外表格單元格。在我的情況下，表格單元只有1px寬，所以它必須在外面顯示。我發現通過製作:hover spanposition: absolute;然後添加margin: -37px 0px 0px -50px;我可以使用它來移動工具提示。但！如果我嘗試調整頂部/左側/底部/右側，那麼絕對設置將它絕對放置在屏幕上，而不是相對於單元。

希望這可以幫助別人。

來源

2015-02-19 02:21:54

超級簡單的CSS工具提示在表中，爲什麼它不顯示，我可以使它工作？

回答

相關問題