Able to use "validation" tooltip for disabled submit button?

[Parisi]

I am trying to implement a tooltip over the submit button when it is disabled by validation. Is there a best way to do this? I see that Fabrik has some sort of built-in tooltip language (when I apply validation to an element), but I'm not sure how to target the submit button with that using custom JS and/or PHP.

 

[cheesegrits]

We just use Bootstrap tooltips and/or popovers, our tooltip code is just a wrapper around that.

You'll have to handle adding and removing the tooltip yourself. At the moment, there's no event that gets fired when we toggle the save button on and off, so I just added one:

https://github.com/Fabrik/fabrik/commit/9db72cf09215b9ff9fae8bb83b697eb6d18cec9e

So after updating from github, you should then be able to create a ./components/com_fabrik/js/from_X.js (replace X with your numeric form ID) that does something like this:

// wait till the fabrik core JS is loaded ...
requirejs(['fab/fabrik'], function () {
   // add an event handler to run on the togglesubmit event
   Fabrik.addEvent('fabrik.form.togglesubmit', function(form, enable) {
      // check the 'enable' arg
      if (!enable) {
         // enable is false, so being disabled, so add tooltip
         jQuery('.btn.save').data('toggle', 'tooltip');
         jQuery('.btn.save').attr('title', 'Your form cannot be saved until all inputs have been validated');
         jQuery('.btn.save').tooltip();
      }
      else {
         // enable is true, so destroy tooltip
         jQuery('.btn.save').tooltip('destroy');
      }
   });
});

-- hugh

 

[Parisi]

Hugh, thanks for the update to Fabrik for this! Looks like the JS file is not loading for the form. I have it saved as ./components/com_fabrik/js/form_1.js. Is there anything else I need to do to enqueue the script for the form?

 

[Parisi]

Update: I have run the JS manually through the console (just for testing). I am able to add a tooltip to the button. However, it looks like the "disabled" attribute keeps the button from displaying the tooltip. Any thoughts? I suspect this may just be a functionality of Bootstrap.

 

[cheesegrits]

Meh, I forgot bootstrap tooltips don't work on disabled DOM elements. Which is kinda silly, as when a button is disabled is usually when you'll want to provide some explanation of why it is disabled.

So you'll have to get creative, and insert a wrapper around the save button, and apply the tooltip to that ...

// wait till the fabrik core JS is loaded ...
requirejs(['fab/fabrik'], function () {
   // as soon as the form is loaded, add a wrapper around the submit button
   Fabrik.addEvent('fabrik.form.loaded', function(form) {
      jQuery('.btn.save').wrap('<div class="mySubmitWrapper" style="display: inline-block"></div>');
   }

   // add an event handler to run on the togglesubmit event
   Fabrik.addEvent('fabrik.form.togglesubmit', function(form, enable) {
      // check the 'enable' arg
      if (!enable) {
         // enable is false, so being disabled, so add tooltip to the wrapper
         jQuery('.mySubmitWrapper').data('toggle', 'tooltip');
         jQuery('.mySubmitWrapper').attr('title', 'Your form cannot be saved until all inputs have been validated');
         jQuery('.mySubmitWrapper').tooltip();
      }
      else {
         // enable is true, so destroy tooltip
         jQuery('.mySubmitWrapper').tooltip('destroy');
      }
   });
});

Of course that means figuring out why your form JS isn't loading. Assuming you got the form ID correct, that probably means there's a typo in my code. Are there any errors in the JS console (open Dev Tools in your browser) when the page loads?

-- hugh

 

[cheesegrits]

I might even add this as a built in option, so you can specify a message to add as a tooltip when the button is disabled if using the "toggle submit" feature.

-- hugh

 

[cheesegrits]

Jeez, how hard can it be to enable / disable a tooltip??? Bootstrap is not cooperating.

I'm struggling with this. I'm going to have to give up on it for today, move on to something else. Remind me about it in a day or two and I'll have another hack at it.

-- hugh