Jump to content

[SOLVED] Product Description HTML/CSS Tooltip Not Working


MrMcQ

Recommended Posts

I have added rollover tooltips to my product descriptions that display ingredients/dosage for each individual product. I was able to make them work when importing them, but for some STRANGE reason, they show up perfectly on most products until I start editing them. Then the styling totally disappears and its doesn't work at all anymore (?).

Here's an example, on one product, you can see the tooltip just fine:
Product Tooltip Works - EDIT (no longer working after editing product desc)

After editing another, you can't see it at all, even though in the source code, you can see it IS:
Product Tooltip Not Working

In my CSS, I'm referencing the background image, in the HTML, I'm referencing the right button image on rollover:

/* PRODUCT DESC BUTTONS */

#desc_buttons{
width:185px;
height:60px;
float:left;
}


a.tooltip {
           border-bottom: 1px dotted #000000; color: #000000; outline: none;
           cursor: help; text-decoration: none;
           position: relative;
       }
a.tooltip span {
           margin-left: -999em;
           position: absolute;
       }
a.tooltip:hover span {
           border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
           box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
           font-family: Calibri, Tahoma, Geneva, sans-serif;
           position: absolute; left: 3em; top: 4em; z-index: 9999;
           margin-left: 0; width: 700px;
       }



a.tooltip:hover img {
           border: 0; margin: -30px 0 0 670px;
           float: left; position: absolute;
       }

a.tooltip:hover em {
           font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
           display: block; padding: 0.2em 0 0.6em 0;
       }
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
       * html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33;display:none; }
.ingredients { background: #99ff99; border: 1px solid #006600;    }
.dosage { background: #ffffcc; border: 1px solid #ff6600;    }
.facts { background: #99ccff; border: 1px solid #0033cc; display:none;    }
.benefits { background: #ffcccc; border: 1px solid #cc0000;display:none; }
.details { background: #ffffcc; border: 1px solid #666666; display:none; }

#ingredients{
background: url('../img/ingredients_button.png') no-repeat;
height:60px;
}

#dosage{
background: url('../img/dosage_button.png') no-repeat;
height:60px;
}



I dunno if it could be because of the relative links, because I tried using the absolute, and it still futz'd up :|

Any ideas would be GREATLY appreciated, thanks all!

Link to comment
Share on other sites

I forgot to mention that the tooltips can be found in the product 'More Info' at the bottom. One is a green 'Ingredients' button, the other 'Dosage'. It really is important that these elements work on the page in this fashion...its so odd that whenever I import these products WITH the HTML, it works fine. When I actually edit the items, it screws everything up!!

Link to comment
Share on other sites

Bump. Someone please help me out here, this is actually turning into a major issue, bc not only are my tooltips not working any more, the images on the products themselves are no longer showing up at all...not in the product list, nor on the product page themselves. Though I can see them fine in the back-end! This is happening whenever I go into a product item to make changes, update an image, description, anything. I dunno what the heck is going on (?)

Link to comment
Share on other sites

This is incredibly frustrating, by what I've read, this should be working. I have all of the other products that I've made no changes to working, but whenever I change anything at all in each product back-end, the tooltip disappears and in some cases, the images don't work anymore!

I NEED HELP PLEASE!

Link to comment
Share on other sites

I just added new images in place of the ones that weren't working...I still don't know what happened (though it must be involved in when I did a migration from GoDaddy to 1and1, though I should note that I did go through the whole database for instances of old url links, changed them). I could really use some feedback from someone, anyone as to what could be causing this HTML problem (?)

Thanks to all and any who can add their ideas/solutions :)

Link to comment
Share on other sites

I'm actually pretty upset that Prestashop has not made any effort to find a solution to this issue. Once again, I've actually tried utilizing a different method for my tooltip, this time using a jquery scripted tooltip, and followed the instructions and setup to the letter AND it worked! The tooltip worked great when moused over, it used the 'title' attribute for a link set by css classes for the script to apply the elements to.

This morning...it doesn't work at all!!!! This is the SAME effect that has happened to my above efforts with just a CSS-based tooltip, which is incredibly frustrating. It works just fine one moment, the next, it stops working altogether!!!

Seriously, can I please get some sort of support for this issue, I'd GREATLY appreciate it!!

Not Working Product

Link to comment
Share on other sites

How can you expect anyone on the PrestaShop forums to help you fix a problem you introduced yourself with third-party non-PrestaShop code? You'd have to be very lucky to find someone who used the same third-party code, made the same mistake, then happened to read your post and be willing to respond. If it was a PrestaShop module you were using or PrestaShop code, you would have been much more likely to get a response from me or another person on the forums. You would be more likely to get help asking on the forum for the third-party code, if there is one.

Link to comment
Share on other sites

No disrespect, rocky, because I know you help out incredibly on this forum...but when Prestashop does not have the module or tool I require to make something work, how can you expect me NOT to use third-party non-Prestashop code?? Now I've made several purchases to your store, and I love your plug-ins...but for certain features that you nor Prestashop plugins have, I'm going to utilize whatever coding I can. Isn't that what half of this forum is about, making things work even if Prestashop doesn't have to ability to? I've found several threads pertaining to utilizing code that isnt Presta-based, how does mine stray from that intent?

  • Like 1
Link to comment
Share on other sites

  • 3 months later...
No disrespect, rocky, because I know you help out incredibly on this forum...but when Prestashop does not have the module or tool I require to make something work, how can you expect me NOT to use third-party non-Prestashop code?? Now I've made several purchases to your store, and I love your plug-ins...but for certain features that you nor Prestashop plugins have, I'm going to utilize whatever coding I can. Isn't that what half of this forum is about, making things work even if Prestashop doesn't have to ability to? I've found several threads pertaining to utilizing code that isnt Presta-based, how does mine stray from that intent?


Just an independent observation of your problem and your feelings about Prestashop's responsibility in this matter.

IMO, you are being unjustifiably hard on Prestashop and other forum members in this matter. Yes Prestashop allows for the use of third-party modules etc. However, it wasn't Prestashop that wrote the third-party code that had the problem. You are expecting (not asking) Prestashop and other forum members to provide support for code that they didn't write. Shouldn't you have gone to the third-party and ask for help with the problem. The third-party would be intimately familiar with their code, whereas Prestashop and the other forum members here don't even know what the module is let alone the code that might be a fault.

Just exactly how could anyone determine if a script was missing without examining the code?
Link to comment
Share on other sites

Its true...looking back on this thread, I agree that it was very harshly and Prestashop was mistakenly blamed for my lack of both mentioning my custom code and I misinterpreted rocky for pointing this out. What seemed to happen was when applying CSS elements within the back-office product description editor, there were varying effects that seemed to save the code in a way which my custom tooltips were no longer working. It also could have been caused by conflicts in the themes CSS or other code conflicts that were unseen. Had I mentioned this earlier and gave a more direct root to the cause, much of this pointless outrage and useless finger-pointing could have been avoided.

I'm glad you brought this to my attention after the fact; my apologies rocky and Prestashop, its a fine product with a hard-working group behind it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...