How To Display Tooltip When Customer On Mouse Hover Add to Cart Button

Question

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.

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