1

I need to display some information before going to buy products, How can i add tooltip when customer on mouse hover the add to cart button.

1

Edit your app\design\frontend\YOUR_PACKAGE\YOUR_THEME\template\catalog\product\view\addtocart.phtml put below code after your Add to Cart button tag completes.

<div class="add-to-cart-buttons">
    <button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>
    <span class="add-to-cart-tooltip"><div class="arrow-left"></div> <span class="tooltip-text"><?php echo $this->__("YOUR TOOLTIP TEXT HERE.") ?></span>
    <?php echo $this->getChildHtml('', true, true) ?>
</div>

Now add below CSS in the same file.

<style>
.add-to-cart-buttons {
    position: relative;
}
.add-to-cart-buttons .add-to-cart-tooltip {
    display: none;
    position: absolute;
    width: 200px;
    height: auto;
    z-index: 100;
    padding: 5px;
}
.add-to-cart-buttons:hover .add-to-cart-tooltip, .add-to-cart-buttons:active .add-to-cart-tooltip {
    display: inline-flex;
}
.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid #8e8e8e; 
}
.tooltip-text{
    border: 1px solid #ccc;
    padding: 7px;
}
</style>
  • Not working,, its look like, – user51361 Apr 25 '17 at 5:52
  • snag.gy/ibZmCw.jpg – user51361 Apr 25 '17 at 5:52
  • Source Code : snag.gy/wK03fO.jpg – user51361 Apr 25 '17 at 5:55
  • I have used the code in rwd theme and it's working correctly. You may need to make changes to CSS to display it right. – Jaimin Sutariya Apr 25 '17 at 16:38
  • @ jaimin : Nope, Still not working ... – user51361 Apr 26 '17 at 4:30

Your Answer

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