Tip & Validation Rules

[Bauer]

I'm not sure if this is something I can fix - and there is no easy way to capture an image as an example - but...

It seems like the element Tips and Validation Rules are being combined in one popup. (I'm fine with that, I guess, though I don't think this was the behavior in earlier versions of Fabrik). Shouldn't the Tip (hovering the question mark) produce one popup and the Validation (hovering the star) another? Right now it looks like hovering over the label produces a combination of both, with the heading "Validation".

If this is the intended design, the issue I have with this is that the tip is left justified in the popup, and yet the validation rule is centered - which usually makes for a strange looking popup, usually with the validation rule containing a line break and broken into 2 lines. I'd like both to be aligned to the left.

The other issue I'd like to fix is to move popups automatically if the position of the element within the current window position will cause the popup to appear outside the viewable area of the screen. This will happen with elements that are near the left or right edge of the screen - or near the top of the screen (and the tip is set to appear above). I know I can change the position of the popup for each element, but because I am using a fluid width screen those rules might not always be the same.

Is there some check that can be put on the popup element using javascript that would determine the size and position of the popup, and if the right, left, or top edge of the popup is outside the viewing area, move it accordingly?

That doesn't sound like a simple request - but if someone could point me to the javascript that paints the popup, maybe I can write the js code that will do this and would be glad to pass it on for inclusion in the project, if/when I get it to work according to my "demands".

 

[IamJim]

Sorry, can't help you on this ALPHA version stuff, I'm still trying for 1 month to get a successful install of the "stable"

http://thumbsupbubba.com/

 

[rob]

Shouldn't the Tip (hovering the question mark) produce one popup and the Validation (hovering the star) another? Right now it looks like hovering over the label produces a combination of both, with the heading "Validation".

We did have it like this, but it was not very practical, one pop up would overwrite a different one etc.

If this is the intended design, the issue I have with this is that the tip is left justified in the popup, and yet the validation rule is centered - which usually makes for a strange looking popup, usually with the validation rule containing a line break and broken into 2 lines. I'd like both to be aligned to the left.

I'd noticed that today as well. The first issue was that it should be showing an icon next to the validation message, but most of the time that wasn't working. That's now fixed (and can be changed in the plugin global properties (e.g when you edit the plugin itself) so you can state the bootstrap icon you want to use. The second was that the validations were rendered in a list which had a margin applied to it, again I think that is resolved.

The other issue I'd like to fix is to move popups automatically if the position of the element within the current window position...... I know I can change the position of the popup for each element, but because I am using a fluid width screen those rules might not always be the same.

Good point, bootstrap's tips constructor has a position property which you can assign a function to (I found that here)
http://blog.leecarmichael.com/2012/05/bootstrap-popover-responsive-layout.html

Which led me to thinking that we should fire an event to allow for tip location overriding.

So if you update from github (joomla3 branch) you can add some custom js to your form:

// Ensure that fabrik is loaded
window.addEvent('fabrik.loaded', function () {

    // Add an event which will fire the function when a tip is shown
    Fabrik.addEvent('bootstrap.tips.place', function (tip, el) {

         // Add your tip position logic here.
         // Should return false for default behaviour, or left/top/right/bottom
        return 'left';
    });
});