0

The default tooltip in checkout/onepage/payment.phtml shows the pop for CVV security codes for credit cards.

We have another tooltip we need to display. However, I don't see an easy way to add another and get it to pop up. I have tried renaming "payment-tool-tip" and adding more javascript. I have tried renaming the second function. It's noto working for me. Can yo suggest something please?

Current tooltip:

<div class="tool-tip" id="payment-tool-tip" style="display:none;">
    <div class="btn-close"><a href="#" id="payment-tool-tip-close" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Close')) ?>"><?php echo $this->__('Close') ?></a></div>
    <div class="tool-tip-content"><img src="<?php echo $this->getSkinUrl('images/cvv.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape($this->__('Card Verification Number Visual Reference')) ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Card Verification Number Visual Reference')) ?>" /></div>
</div> 

<script type="text/javascript">
//<![CDATA[
    function toggleToolTip(event){
        if($('payment-tool-tip')){
            $('payment-tool-tip').setStyle({
                top: (Event.pointerY(event)-560)+'px'//,
                //left: (Event.pointerX(event)+100)+'px'
            })
            $('payment-tool-tip').toggle();
        }
        Event.stop(event);
    }
    if($('payment-tool-tip-close')){
        Event.observe($('payment-tool-tip-close'), 'click', toggleToolTip);
    }
//]]>
</script>

I want to add the following as a second tool tip that will also pop up upon clicking the new link on the page:

<div class="tool-tip" id="second-tool-tip" style="display:none;">
    <div class="btn-close"><a href="#" id="second-tool-tip-close" title="<?php echo $this->__('Close') ?>"><?php echo $this->__('Close') ?></a></div>
    <div class="tool-tip-content"><p><strong>Second Tool Tip</strong><br />Second tool tip description.</p></div>
</div>

I have tried adding a second js function and changed 'payment-tool-tip' to 'second-tool-tip.' I also tried renaming a second js function to toggleSecondToolTip with 'second-tool-tip' to no avail. The second tool tip never pops up. Obviously, I'm not fluent in js.

1 Answer 1

0

Try this way:

Your tooltip in checkout/onepage/payment.phtml

<div class="tool-tip" id="second-tool-tip" style="display:none;">
    <div class="btn-close"><a href="#" id="second-tool-tip-close" title="<?php echo $this->__('Close') ?>"><?php echo $this->__('Close') ?></a></div>
    <div class="tool-tip-content"><p><strong>Second Tool Tip</strong><br />Second tool tip description.</p></div>
</div>

and script part in same file

<script type="text/javascript">
//<![CDATA[
    function toggleToolTip(event){
        if($('payment-tool-tip')){
            $('payment-tool-tip').setStyle({
                top: (Event.pointerY(event)-560)+'px'//,
                //left: (Event.pointerX(event)+100)+'px'
            })
            $('payment-tool-tip').toggle();
        }
        Event.stop(event);
    }
    if($('payment-tool-tip-close')){
        Event.observe($('payment-tool-tip-close'), 'click', toggleToolTip);
    }

    function toggleSecondToolTip(event){
        if($('second-tool-tip')){
            $('second-tool-tip').setStyle({
                top: (Event.pointerY(event)-515)+'px'//,
                //left: (Event.pointerX(event)+100)+'px'
            })
            $('second-tool-tip').toggle();
        }
        Event.stop(event);
    }
    if($('second-tool-tip-close')){
        Event.observe($('second-tool-tip-close'), 'click', toggleSecondToolTip);
    }

    $$('.cvv-what-is-this-second').each(function(element) {
        Event.observe(element, 'click', toggleSecondToolTip);
    });

    initWhatIsCvvListeners();   
//]]>
</script>

And obviously you need to have a clickable text in your payment method. Add this line:

<a href="#" class="cvv-what-is-this"><?php echo $this->__('What is this?') ?></a>
<a href="#" class="cvv-what-is-this-second"><?php echo $this->__('Second tooltip?') ?></a>

This should work.

6
  • Thank you, but, unfortunately, it did not work. The first tool tip still works as usual, but nothing with the second one.
    – Scot
    Commented Apr 6, 2016 at 5:19
  • It works in my side, have tested already. Remember cvv-what-is-this-second is very important in order to get it work. Commented Apr 6, 2016 at 5:20
  • I wish you were on "this side." :) I have tried this in version 1.9.2.1 and 1.9.2.2 on one server and in 1.9.2.2 on another server with no luck. I have tried it exactly as you have it in two different custom themes, the default theme, and rwd theme.
    – Scot
    Commented Apr 6, 2016 at 16:00
  • Did u add this exactly same? <a href="#" class="cvv-what-is-this"><?php echo $this->__('What is this?') ?></a> <a href="#" class="cvv-what-is-this-second"><?php echo $this->__('Second tooltip?') ?></a> Commented Apr 6, 2016 at 23:30
  • Yes. I tried exactly that. They are normally in separate divs, but I did as you have it (side by side) just to be exact, and it did not work. I also switched to default theme and added these to the default folders, and still nothing.
    – Scot
    Commented Apr 7, 2016 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.