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.

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.

  • Thank you, but, unfortunately, it did not work. The first tool tip still works as usual, but nothing with the second one. – Scot Apr 6 '16 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. – Adarsh Khatri Apr 6 '16 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 Apr 6 '16 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> – Adarsh Khatri Apr 6 '16 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 Apr 7 '16 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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