How to Add Tooltip in ui_component Form Field in Magento 2

In this post I am going to explain how to add tooltip in ui_component form field in Magento 2.

Check the below example code snippet to add tooltip in ui_component form field.

<field name="identifier" formElement="hidden">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Identifier</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">identifier</item>
            <item name="dataScope" xsi:type="string">identifier</item>
        </item>
    </argument>
    <settings>
        <dataType>text</dataType>
        <tooltip>
            <link>https://www.google.com</link>
            <description translate="true">Tool-tip content for the identiier field.</description>
        </tooltip>
    </settings>
</field>

Here under “<settings>” tag “<tooltip>” tag is used to add tooltip.

<link> – Link will redirect to specific page on click of tooltip icon.
<description> – Display text on tooltip icon hover.

Thats it. Enjoy Magento 2!!

 

Team HiddenTechies

Write an article about ecommerce that help people to grow their ecommerce business. You’ll find best ecommerce guide, news, tips & more!