1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Display required fields in the save button tooltip

Display required fields in the save button tooltip

Hello,

I want to display a tooltip on my save button when the user hit it and he/she is missing required fields.

In addition I want to add the list of the required fields.

Knowing that it is not a form, the button is calling a jquery function.

Thank you in advance.


3 Replies
SM Shalini Maragathavel Syncfusion Team August 11, 2021 12:08 PM UTC

Hi Ahmed, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you need to show tooltip for the button based on the required input field. You can achieve your requirement by binding the Tooltip content using content property for the button based on the value in the input event of Textbox as demonstrated in the below code snippet, 
 
<form id="details" role="form"> 
        <table> 
            <tr> 
                <td class="info"> User Name:</td> 
                <td> <ejs-textbox id="firstname" input="change" placeholder="First Name"></ejs-textbox> </td> 
            </tr> 
           
        </table> 
       
    </form> 
    <div> 
        <ejs-tooltip id="Tooltip" content="User name should not be empty" target="#btn" windowCollision="true" position=TopCenter showTipPointer="true"> 
            <e-content-template> 
                <ejs-button id="btn" content="Save"></ejs-button> 
            </e-content-template> 
        </ejs-tooltip> 
    </div> 
<script> 
    
    function change(args) { 
        var tooltip = document.getElementById('Tooltip').ej2_instances[0]; 
        if (args.value == "") { 
            tooltip.content = "User name should not be empty"; 
        } 
        else{ 
            tooltip.content = "Default tooltip"; 
        } 
    } 
   
</script> 

Please find the below sample for your reference, 
Please let us know if you need further assistance. 

Regards, 
Shalini M. 


AH Ahmed August 12, 2021 07:27 PM UTC

Thank you Shalini,

The idea is that the tooltip is disabled if the form is complete.

If a user forget to fill one required field and click on the save button the tooltip will be enabled and displays the required fields list (to make it simple).

And the other challenge, I want to make it client side as it is not a form, is is jquery event.

Regards,


SM Shalini Maragathavel Syncfusion Team August 13, 2021 12:04 PM UTC

Hi Ahmed, 

Thanks for the update. 

We checked your query and would like to let you know that in EJ2 Tooltip we do not have options to disable the Tooltip. However, you can show/hide the Tooltip based on the conditions by setting args.cancel property as true/false in beforeOpen event of Tooltip as demonstrated in the below code snippet, 
<form id="details" role="form"> 
        <table> 
            <tr> 
                <td class="info"> User Name:</td> 
                <td> <ejs-textbox id="firstname" input="namechange" placeholder="First Name"></ejs-textbox> </td> 
            </tr> 
            <tr> 
                <td class="mail">Mail id</td> 
                <td><ejs-textbox id="mailId" input="mailchange" placeholder="Mail"></ejs-textbox></td> 
            </tr> 
           
        </table> 
       
    </form> 
    <div> 
        <ejs-tooltip id="Tooltip" content="Please fill the required fields" target="#btn"  beforeOpen="beforeOpen" > 
            <e-content-template> 
                <ejs-button id="btn" content="Save"></ejs-button> 
            </e-content-template> 
        </ejs-tooltip> 
    </div> 
<script> 
    var boolean,value1,value2; 
    
    function namechange(args) { 
    
        value1 = args.value;  //to get the value of first textbox 
        
    } 
    function mailchange(args) { 
        value2 = args.value;  //to get the value of second textbox 
    
    } 
    function beforeOpen(args) { 
     
   if (value1 && value2 ) { 
 
            args.cancel = true; 
        } 
    } 
   
</script> 

Please find the below sample for your reference, 

API Link: https://ej2.syncfusion.com/javascript/documentation/api/tooltip#beforeopen
                 https://ej2.syncfusion.com/javascript/documentation/api/tooltip/tooltipEventArgs/#cancel

Note: You can also use open and close method to show/hide the Tooltip based on your scenario. Similar to the above code, you can use these client side events and methods based on your scenario. 

If we have misunderstood your requirement, then please share us the following information to validate further. 

  • Share us your complete Tooltip rendering code.
  • If possible, please modify and share the above sample according to your scenario.
  • Elaborate on your requirement in detail with pictorial or video demonstration(if possible).
 
This information would help us to find the exact cause of your reported problem and to provide you the prompt solution. 

Regards,   
Shalini M. 



Loader.
Up arrow icon