How to include Tooltip into a field of the backend form in Magento 2

UI Elements are a trying to follow a new approach to create  user interface elements in Magento 2, and the new admin console is very much built with this functionality.

Magento UI Elements is considered with simple and malleable UI Rendering. They admit you to shape the UI components handler page. Magento UI Elements are executed as a constant module and they can be found in Magento \ UI names. The final elements are the rendering of the page pieces and the JavaScript elements and server offer more providing / supporting.

The Magento Tool 2 tooltip tool has been designed to help you show any custom description of your custom block backend UI. Recent days, I will show you how to include a tool in the backend form. This is clearly visible to the users.

 Backend Form using UI Component

To explain the tooltip in your backend Form, you desire to include tooltip into UI-component file

/app/code/[NameSpace]/[ModuleName]/view/adminhtml/ui_component/

[custom_module_form].xml

<field name="identifier">

<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">block</item>

         <item name="dataScope" xsi:type="string">identifier</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">This is an unique value to identify the block.</item>

         </item>

     </item>

</argument>

</field>
  • You can also have an URL to the tooltip. Then users can also navigate to that Url after a tap on the tooltip icon.
<field name="identifier">

<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">block</item>

         <item name="dataScope" xsi:type="string">identifier</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="link" xsi:type="string">http://[your-external-url]</item>

             <item name="description" xsi:type="string">This is an unique value to identify the block.</item>

         </item>

     </item>

</argument>

</field>

These given procedures are said to be the simplest process for you to contain Tooltip into a Field of the Backend Form Using UI Component. With this data, you can hold the Field of the Backend Form Using UI Component easily. Every store has a Field of the Backend Form Using UI Component in Magento 2 with various elements.

Last Update: March 8, 2019  

March 12, 2018   431   Nandini R    Operations    
Total 2 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Twitter
INSTAGRAM
LinkedIn