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 Answer 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) ?>

Now add below CSS in the same file.

.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; 
    border: 1px solid #ccc;
    padding: 7px;
  • Not working,, its look like,
    – user51361
    Apr 25, 2017 at 5:52
  • snag.gy/ibZmCw.jpg
    – user51361
    Apr 25, 2017 at 5:52
  • Source Code : snag.gy/wK03fO.jpg
    – user51361
    Apr 25, 2017 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. Apr 25, 2017 at 16:38
  • @ jaimin : Nope, Still not working ...
    – user51361
    Apr 26, 2017 at 4:30

Your Answer

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