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;
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;
}
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?
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?
Single element To make an element display its tooltip permanently, we use its showTooltipOn property. To make tooltip always be shown, set it to "always" .
Select your table visual. Go to the paint roller icon (format). Scroll down and turn on Tool Tip.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With