xtform icon indicating copy to clipboard operation
xtform copied to clipboard

Tooltip hover behaviours

Open refactorthis opened this issue 10 years ago • 4 comments

Add tooltip-trigger to the form element. This is the same as bootstrap's trigger option on the tooltip plugin.

refactorthis avatar Jan 18 '15 05:01 refactorthis

@ReinierGielen

refactorthis avatar Jan 18 '15 06:01 refactorthis

If I understand this solution correctly the attribute tooltipTrigger is added to the form and it has the same options as the bootstrap tooltip and your code passes this through so the programmer can set the tooltiptrigger for each form seperatly.

Sounds great.

ReinierGielen avatar Jan 19 '15 09:01 ReinierGielen

Great stuff on the hover option for the tooltips, works really nice. A minor bug I found was that when an error is resolved by the user the tooltip is hidden but it reapears when hovered again. I solved this by replacing 'hide' by 'destroy'. Also I wanted a css handle for styling the element when the tooltip is placed on an alternative element. This handle must remain as long as there is an error. I solved it by adding an extra class to the element which is removed when the number of errors is 0. This resulted in this code: function redrawErrors() {

            if (attrs.xtValidationTooltip != ""){
                element.addClass('xt-invalid');
            }

            if (ngModel.$xtErrors.length === 0 ) {
                element.removeClass('xt-invalid');
                lastErrors = null;
                element.tooltip('destroy');
                return;
            }

Now I have only 1 bug left that I have not solved yet. When I have input fields in error with hover tooltips and I reset my form the tooltips are not destroyed and can re-appear when it is not appropriate.

Hope this stuff is usefull. If I find a solution for this last bug I'll post it here.

ReinierGielen avatar Jan 23 '15 11:01 ReinierGielen

I change the type of my reset button to "reset" and now I actually get in the reset branch in xtForm. The I do however get a function is undefined on vm.form.$setUntouched After some googeling and debugging I found out that $setUntouched is not a function of a form, but a function of each form control. Removing this line of code seem to have no effect on the workings except ther is no javascript error anymore.

Please correct me if I have drawn the wrong conclusion.

However this does not solve my problem, I still need a way to remove all validation tooltips from the form elements on reset.

ReinierGielen avatar Jan 28 '15 15:01 ReinierGielen