0

I am trying to implement Magento 2 checkout type tooltip with a question mark on the product page next to the custom option text label like shown in the picture. This is not a configurable product. It is a simple product with custom options with only one option which is size. I copied tooltip code from one of the checkout file and inserted in select.phtml as shown below. I am running into couple of issues. One is the tooltip question mark is misplaced on the screen. It is placed on the top right corner of the product page. Second the tooltip content is clickable.

enter image description here

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>

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

    <div class="field-tooltip toggle">
            <span class="field-tooltip-action action-help"
                  data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false">
            </span>
            <div class="field-tooltip-content" data-target="dropdown" aria-hidden="true">
                <?= $block->escapeHtml(__('Information on size')); ?>
            </div>
        </div>


    <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::OP$
                <span id="options-<?= /* @escapeNotVerified */ $_option->getId() ?>-container"></span>
            <?php endif; ?>
        <?php endif;?>
    </div>
</div>
1

try this solution

<?php
$_option = $block->getOption();
$class = ($_option->getIsRequire()) ? ' required' : '';
?>
<div class="field<?= /* @escapeNotVerified */ $class ?>">
    <label class="label control _with-tooltip" for="select_<?= /* @escapeNotVerified */ $_option->getId() ?>">
        <span><?= $block->escapeHtml($_option->getTitle()) ?></span>

        <div class="field-tooltip toggle">
            <span class="field-tooltip-action action-help"
                  data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false">
            </span>
            <div class="field-tooltip-content" data-target="dropdown" aria-hidden="true">
                <?= __('Information on '.$block->escapeHtml($_option->getTitle())); ?>
            </div>
        </div>
    </label>

    <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>

don't forget cache flush and reload :)

  • have replaced <label class="label with my custom link & have removed div class control. Have a link(CSS to display as a button) near Add to cart button for which i have to use help icon. With this method, it gets displayed but it gets inside this button and when clicked it shows select all and unselect all. Could you please guide me in this. If you could create a simple link near or below add to cart button with this icon on hover i would be really grateful – insoftservice Nov 4 '19 at 20:57

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.