0

On a product page, you can have customizable options, like:


enter image description here


There are probably people out there who don't know what "Finish" means. In this case, I'd like to add a small help box, maybe like this:


enter image description here

And when someonehovers or clicks on it, it'll pop up a tooltip.

Is this possible? If so, how can I do it? Is there anextension out there that can do this easily?

  • Do you want to add tool tip for all option or for specific option? – Rakesh Varma Jul 7 '18 at 6:02
  • @RakeshVarma Specific options, but if multiple products have the same customizable option then the help box (with tooltip) will show – Mingle Li Jul 7 '18 at 15:48
  • You have to install some third party extension or you can customise text.phtml file under product/view/options/type.. for text type custom option – Rakesh Varma Jul 7 '18 at 16:07
0

Follow the steps given below.

Create the following file in your theme

app/design/frontend/namespace/theme/Magento_Catalog/templates/product/view/options/type/select.phtml

<?php /* @var $block \Magento\Catalog\Block\Product\View\Options\Type\Select */ ?>
<?php
$_option = $block->getOption();
$class = ($_option->getIsRequire()) ? ' required' : '';
?>
<div class="field<?= /* @escapeNotVerified */ $class ?>">
    <label class="label" for="select_<?= /* @escapeNotVerified */ $_option->getId() ?>">
        <span><?= $block->escapeHtml($_option->getTitle()) ?></span>
    </label>

    <?php 
        /**** custom tooltip starts ****/ 
        // add your option id in the if condition
    ?>
    <?php if ($_option->getId() == 2) : ?>
        <span class="custom-tooltip">
            <a href="javascript:void(0)" class="tooltip-toggle">?</a>
            <span class="tooltip-content">Add your tooltip content here</span>
        </span>
    <?php endif; ?>
    <?php /**** custom tooltip ends ****/ ?>

    <div class="control">
        <?= $block->getValuesHtml() ?>
        <?php if ($_option->getIsRequire()): ?>
            <?php if ($_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_RADIO || $_option->getType() == \Magento\Catalog\Api\Data\ProductCustomOptionInterface::OPTION_TYPE_CHECKBOX): ?>
                <span id="options-<?= /* @escapeNotVerified */ $_option->getId() ?>-container"></span>
            <?php endif; ?>
        <?php endif;?>
    </div>
</div>

Create a less file

app/design/frontend/namespace/theme/web/css/source/_extend.less

#product-options-wrapper .custom-tooltip {
    .lib-tooltip(right);
}

#product-options-wrapper .custom-tooltip a {
    background-color: #000;
    color: #fff;
    padding: 0px 7px;
    border-radius: 50%;
}

Run following commands

php bin/magento setup:upgrade
php -dmemory_limit=2G bin/magento setup:static-content:deploy -f

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.