Super simple CSS tooltip in a table, why is it not displaying and can I make it work?
I have been trying to implement many different tooltips on this page for my client, he's adamant that we have a picture of the product show up when you hover over the product name in the order page. I decided to use the super simple CSS tooltip, it's very easy to implement and does exactly what we want. It works on a dynamic page, the others I tried didn't.
I have made an example here: CSS tooltip in table example.<-- updated to 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 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;
padd开发者_如何转开发ing: 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;
}
This page used to be displayed using divs, I have since changed it to a table, as it's tabular data and easier to work with. It worked fine when it used divs, now it's in a table, it won't display the span on hover.
My questions are:
Why is it not working?
How can I make it work?
- If not, does anyone know another super easy to implement tooltip that can work properly on a dynamic page?
Here's the DIV tooltip for 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: Just noticed it half works in IE8.
Update: It's now working in all browsers, thanks to Daniel pointing out my CSS errors, but is there a way to make it display outside of the table cell?
Find a 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 into your ears!</span>
</a>
</td>
<td>19.99</td>
</tr>
</tbody>
</table>You seem to have a problem with CSS. Simply using styles of the working JSFiddle demo should fix it. You had the span set as display:none, however it looks like this tooltip works by hiding the image from the screen, using left:-999px.
Check this: http://jsfiddle.net/WNzhJ/
I have checked your code, and as you can see by the jsfiddle sytax hightlighting there are a lot of errors in your code: for example the span you who starts in your a finishes outside your a. The CSS should work like this. There are a few more errors. i think if you correct them its gonna work. (simply pass the w3c check, then anything should be just fine)
edit: i missed a thing your link should be position: relative; because your tooltip is position: absolute, the absolute always is relative to the last relative parent.
also remove the opacity: 0 in your original span
I was trying the same thing, trying to get a CSS tooltip to appear outside of the table cell. In my case the table cell was only 1px wide so it HAD to show up outside. I found out that by making the :hover span position: absolute; and then adding margin: -37px 0px 0px -50px; I could use that to move the tooltip around. BUT! If I tried to adjust the top/left/bottom/right then the absolute setting positioned it absolutely on the screen, not relative to the cell.
Hope this helps someone.
加载中,请稍侯......
精彩评论