popup window on link "Hover"

Store Builder Questions
1

Hi

I have modified my products using hooks to show a custom message in the products price if the price of a product is set to €0.00

It shows the price as normal if set to any other value.



The issue I am having is the custom message is quite long and shows on all areas of the site that displays the products pricing.

Messing up the layouts.



I want to put a link within my custom message that will activate a popup (on Hover) message with the instructions for the purchaser.



can someone guide me.



Alan

2

This will do the job > JQuery popups.

3

[quote name='StellarBytes' timestamp='1385393414' post='172322']

This will do the job > JQuery popups.

[/quote]

Thank you

How simple was that, when you know what you are doing. Very neat.



Just one thing would it be possible to make this happen on hover instead of click.



Alan

4

Yes you could do it that way by adding a hover event to the jQuery but it is generally regarded as a poor practise for usability to create a pop-up using the hover method.



Instead, I would go with the Tooltip method. You don't even need to do any further programming, because the functions are already defined in the default CS-Cart package. Something like this will do it:-


```php

01334 655766 or 655792

Text here for some extra info about the price.


```

As long as the class ("price-note") and the title ("$tooltip") are the same, this will work. You may want to play around with the top and left positioning for each use. This works in most major browsers. To see this in action, in your store admin go to Settings>General and hover over one of the black circle with question marks (ie. at the end of "Enable secure connection at checkout").
5

Hi StellarBytes

Thank you for all your help, I think the first option with the popup on click will do the trick.

But I am having one issue,

When in the product view, the popup is behind some elements.

How would I change the Z-index of the popup.



http://shopability.ie/index.php?dispatch=products.view&product_id=10383



Alan

6

This is not an issue with z-index, it's a problem with the overflow. You may want to read up on CSS overflow and see how it applies to your product page structure.

7

[quote name='StellarBytes' timestamp='1385406032' post='172332']

This is not an issue with z-index, it's a problem with the overflow. You may want to read up on CSS overflow and see how it applies to your product page structure.

[/quote]

Hi StellarBytes

I had a look at this and the popup box is being contained inside


overflow is set to hidden

But if I change the overflow value in firebug to "visible" the popup window shows.
but my product info moves left to below the product image.
And I can't figure how to prevent this.
Alan