How To Display Tooltip When Customer On Mouse Hover Add to Cart Button
-
08-10-2020 - |
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.
La solution
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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange