Super simple CSS info-bulle dans un tableau, pourquoi n'est-il pas de l'affichage, et puis-je le faire fonctionner?
J'ai essayé d'implémenter différentes bulles d'aide sur cette page pour mon client, il est inflexible sur le fait que nous avons une photo du produit s'affiche quand vous passez la souris sur le nom du produit dans la page de commande. J'ai décidé d'utiliser la super simple CSS info-bulle, il est très facile à mettre en œuvre et fait exactement ce que nous voulons. Il fonctionne sur une page dynamique, les autres, je n'ai pas essayé.
J'ai fait un exemple ici: CSS info-bulle dans le tableau exemple.<-- mis à jour pour supprimer les erreurs.
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;
}
Cette page utilisé pour être affichées à l'aide de la vrd, j'ai depuis changé d'un tableau, comme c'est des données tabulaires et plus facile à travailler. Il a bien fonctionné lorsqu'il a utilisé des divs, maintenant il est dans un tableau, il n'affiche pas la durée sur le vol stationnaire.
Mes questions sont:
-
Pourquoi n'est-il pas de travail?
-
Comment puis-je le faire fonctionner?
- Si non, personne ne
une autre super facile à mettre en œuvre
info-bulle qui peuvent travailler correctement sur un
page dynamique?
Voici la DIV info-bulle pour référence: DIV affichage de l'info-bulle.
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;
}
Modifier: Juste remarqué la moitié travaille dans IE8.
Mise à jour: Il travaille maintenant dans tous les navigateurs, grâce à Daniel signale mon CSS erreurs, mais est-il un moyen de faire afficher à l'extérieur de la cellule du tableau?
Il est d'ores et déjà bloquer, j'ai essayé
inline-block
aussi, cela n'a pas fonctionné..
OriginalL'auteur Kyle | 2010-04-29
Vous devez vous connecter pour publier un commentaire.
Vous semblez avoir un problème avec le CSS. Tout simplement en utilisant des styles de travail JSFiddle démo devrait résoudre le problème. Vous avez eu de la durée de définir comme
display:none
, mais il ressemble à cette info-bulle fonctionne en cachant l'image de l'écran, à l'aide deleft:-999px
.Vérifier: http://jsfiddle.net/WNzhJ/
décent exemple, mais un peu compliqué.
OriginalL'auteur Daniel Vassallo
J'ai vérifié le code, et comme vous pouvez le voir par le jsfiddle sytax hightlighting il y a beaucoup d'erreurs dans votre code: par exemple, la durée de vous qui commence dans votre un se termine en dehors de votre un. Le CSS devrait fonctionner comme ça. Il y a un peu plus d'erreurs. je pense que si vous les corriger sa va marcher. (il suffit de passer le w3c vérifier, alors tout devrait être très bien)
edit: j'ai raté un truc votre lien doit être en position: relative; car votre info-bulle est en position: absolute, l'absolu est toujours par rapport à la dernière par rapport parent.
également supprimer l'opacité: 0 dans l'original de votre durée de
j'ai édité ma réponse
Modifier la positoning, ne fonctionne toujours pas. Encore à moitié travaille dans IE8, il affiche le caché durée, mais seulement dans les limites de la cellule du tableau.
regardez ça marche: jsfiddle.net/dbZTK/6 vous avez eu une opacité: 0 dans l'original de votre durée (il fonctionne sous IE, parce que ie ne prend pas en charge opacité CSS, j'utilise sa propre merde ;P )
Grâce Meo! A beaucoup aidé!
OriginalL'auteur meo
J'ai essayé la même chose, en essayant d'obtenir un CSS info-bulle apparaisse à l'extérieur de la cellule du tableau. Dans mon cas, la cellule du tableau était que de 1px de large donc il fallait montrer à l'extérieur. J'ai découvert qu'en faisant le
:hover span
position: absolute;
puis en ajoutantmargin: -37px 0px 0px -50px;
je pourrais l'utiliser pour déplacer l'info-bulle autour de vous. MAIS! Si j'ai essayé d'ajuster le haut/gauche/bas/droite, alors la valeur absolue de réglage de se positionner de manière absolue sur l'écran, pas par rapport à la cellule.Espère que cela aide quelqu'un.
OriginalL'auteur Alan Stewart