How to add tooltip in UiComponent form field

Hello Friends!!!

In this blog, we are going to learn how we can add a tooltip in a field in the ui-component form.

For example, we have an input field “rule_name” in our ui-component form and we want to add a tooltip with this field, then we will do it as following code:

<field name="rule_name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="label" xsi:type="string" translate="true">Rule Name</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                    <item name="tooltip" xsi:type="array">
                        <item name="description" xsi:type="string">Mention your tip/hint here.</item>
                    </item>
                </item>
            </argument>
        </field>

See the result in following image:

Hope this will be helpful. Thanks 🙂