fixes #1037

docs/resources/changelog.md

@@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-tree-item>` where `sl-selection-change` was emitted when the selection didn't change [#1030](https://github.com/shoelace-style/shoelace/pull/1030)
 - Fixed a bug in `<sl-button-group>` that caused the border to render incorrectly when hovering over icons inside buttons [#1035](https://github.com/shoelace-style/shoelace/issues/1035)
 - Fixed an incorrect default for `flip-fallback-strategy` in `<sl-popup>` that caused the fallback strategy to be `initial` instead of `best-fit`, which is inconsistent with Floating UI's default [#1036](https://github.com/shoelace-style/shoelace/issues/1036)
+- Fixed a bug where browser validation tooltips would show up when hovering over form fields [#1037](https://github.com/shoelace-style/shoelace/issues/1037)
 - Improved IntelliSense in VS Code, courtesy of [Burton's amazing CEM Analyzer plugin](https://github.com/break-stuff/cem-plugin-vs-code-custom-data-generator)
 - Improved accessibility of `<sl-alert>` so the alert is announced and the close button has a label
 - Removed unused aria attributes from `<sl-skeleton>`

src/components/button/button.ts

@@ -255,6 +255,7 @@ export default class SlButton extends ShoelaceElement implements ShoelaceFormCon
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : this.type)}
+        title=${'' /* An empty title prevents browser validation tooltips from appearing on hover */}
         name=${ifDefined(isLink ? undefined : this.name)}
         value=${ifDefined(isLink ? undefined : this.value)}
         href=${ifDefined(isLink ? this.href : undefined)}

src/components/checkbox/checkbox.ts

@@ -150,6 +150,7 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
         <input
           class="checkbox__input"
           type="checkbox"
+          title=${'' /* An empty title prevents browser validation tooltips from appearing on hover */}
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}
           .indeterminate=${live(this.indeterminate)}

src/components/input/input.ts

@@ -430,6 +430,7 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
               id="input"
               class="input__control"
               type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}
+              title=${'' /* An empty title prevents browser validation tooltips from appearing on hover */}
               name=${ifDefined(this.name)}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}

src/components/range/range.ts

@@ -285,8 +285,9 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont
             <input
               part="input"
               id="input"
-              type="range"
               class="range__control"
+              title=${'' /* An empty title prevents browser validation tooltips from appearing on hover */}
+              type="range"
               name=${ifDefined(this.name)}
               ?disabled=${this.disabled}
               min=${ifDefined(this.min)}

src/components/switch/switch.ts

@@ -157,6 +157,7 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
         <input
           class="switch__input"
           type="checkbox"
+          title=${'' /* An empty title prevents browser validation tooltips from appearing on hover */}
           name=${ifDefined(this.name)}
           value=${ifDefined(this.value)}
           .checked=${live(this.checked)}

src/components/textarea/textarea.ts

@@ -310,6 +310,7 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
               part="textarea"
               id="input"
               class="textarea__control"
+              title=${'' /* An empty title prevents browser validation tooltips from appearing on hover */}
               name=${ifDefined(this.name)}
               .value=${live(this.value)}
               ?disabled=${this.disabled}