html - Super simple CSS tooltip in a table, why is it not displaying and can I make it work? -
i have been trying implement many different tooltips on page client, he's adamant have picture of product show when hover on product name in order page. decided use super simple css tooltip, it's easy implement , want. works on dynamic page, others tried didn't.
i have made example here: css tooltip in table example.<-- updated remove errors.
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"> </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=""> </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"> </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=""> </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"> </td> <td colspan="4" class="subtotalcaption2">mva (25%):</td> <td class="amount taxamount2">822.-</td> <td> </td> </tr> <tr> <td class="subtotalcaption2"> </td> <td colspan="4" class="subtotalcaption2">totalt:</td> <td class="subtotal2">4111.-</td> <td> </td> </tr> <tr> <td colspan="5"></td> <td class="cartquant"></td> <td> </td> </tr> <tr> <td colspan="7"> <a href="/" class="continueshopping"><span> </span></a> <div class="checkoutbuttons"> <a href="/checkout" class="proceedtocheckout" onclick="return order.submitcartform(this);"><span> </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 must 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 { 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 { 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 { 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; } this page used displayed using divs, have since changed table, it's tabular data , easier work with. worked fine when used divs, it's in table, won't display span on hover.
my questions are:
why not working?
how can make work?
- if not, know super easy implement tooltip can work on dynamic page?
here's div tooltip reference: 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; } edit: noticed half works in ie8.
update: it's working in browsers, daniel pointing out css errors, there way make display outside of table cell?
find more readable working solution 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 ears!</span> </a> </td> <td>19.99</td> </tr> </tbody> </table>
Comments
Post a Comment