Hovering over form controls shows constraint validation message even when inside <form novalidate>

[xdev1]

Please have a look at following demo:
https://jsfiddle.net/jtc49bao/
While the form has the attribute "novalidate" the sl-input element still shows a "Please fill out this field" tooltip (the HTML input form doesn't show a tooltip, which is the correct behavior):

Not really sure and maybe a silly idea, but just in case you do not have a better one:
A form element directly surrounding the input control in the shadow DOM plus a MutationObserver for the novalidate attribute of the light DOM form plus synchronizing the novalidate attribute from the light DOM form to the shadow DOM form might work.
Hopefully, you know a better and easier solution 😉

[claviska]

I don't think there's much we can reasonably do today (without ElementInternals) except for applying title="" to the internal input to suppress the message. Note that Safari doesn't show anything, so the problem is limited to Chrome and Firefox.

For casual readers: this issue is referring to the browser tooltip you'll see when hovering the mouse for a couple seconds over the field, not the constraint validation popover.

I'm not willing to add a mutation observer to try to cover all the edge cases with adding/removing/mutating form controls in the DOM. If there are no objections or better ideas, emptying the title is my preferred solution.

[xdev1]

I am 100% fine with just emptying the title attribute 👍 ... I personally will not miss that tooltip 😃

[claviska]

I did some research and couldn't find a better solution, so I'm calling this fixed in a50909d. It's probably better to suppress the native tooltip entirely rather than try to make it work in every possible scenario. At least now it's consistent in all browsers.

This will be available in the next beta release.