Magento2 – How to Add Tooltip to Admin Form Input Field

adminformsmagento2

I want to add tool-tip to my custom admin form field, below is my form.
enter image description here

My code is here.

NameSpace\ModuleName\Block\Rule.php

protected function _addGeneralFieldset($rule, &$values)
{
    $fieldset = $this->_form->addFieldset('base_fieldset',
        [
            'legend'=>__('Rule Information'),
            'class'=>'fieldset-wide',
    ]);

    $this->_addElementTypes($fieldset);

    $data = new DataObject($values);

    if ($rule->getId()) {
        $fieldset->addField('rule_id', 'hidden', [
            'name' => 'rule_id',
            'is_wide'=>true,
            'is_top'=>true,
            'is_hidden'=>true,
        ]);
    }

    $fieldset->addField('product_ids', 'hidden', [
        'name' => 'product_ids',
        'is_wide'=>true,
        'is_top'=>true,
        'is_hidden'=>true,
    ]);

    $fieldset->addField('name', 'text', [
        'name' => 'name',
        'label' => __('Name'),
        'title' => __('Name'),
        'required' => true,
    ]);

    $fieldset->addField('description', 'textarea', [
        'name' => 'description',
        'label' => __('Description'),
        'title' => __('Description'),
        'style' => 'height: 100px;',
    ]);

    $fieldset->addField('is_active', 'select', [
        'label'     => __('Status'),
        'title'     => __('Status'),
        'name'      => 'is_active',
        'required' => true,
        'options'    => [
            '1' => __('Active'),
            '0' => __('Inactive'),
        ],
    ]);

    $this->_prepareFieldsetColumns($fieldset);
    return $this;
}

Best Answer

It is easy to add tooltip if we create a form using UI component.
Anyway i found the solution using ->setAfterElementHtml() we can add div and script as per our requirement. i think this is the only one way to add tooltip.
Here is my code.

$fieldset->addField('name', 'text', [
        'name' => 'name',
        'label' => __('Name'),
        'title' => __('Name'),
        'required' => true,
    ])->setAfterElementHtml('
        <div class="field-tooltip toggle">
            <span class="field-tooltip-action action-help" tabindex="0" hidden="hidden"></span>
            <div class="field-tooltip-content">
                 <span>Enter Name</span>
            </div>
        </div>
    ');

Note : You need to apply css for adjust position of tooltip where you want to display.

Related Topic