3

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;
}
2

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.

  • which version are this ? I have 2.2.2 and it does not have method setAfterElementHtml so it doesn't work for me any ideas?thanks – Juliano Vargas Sep 6 '18 at 9:38
  • it's working in 2.1.9 – Chirag Patel Sep 6 '18 at 10:31

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.