Tooltip icon is not aligned with "Remember Me" text in login box

[utsavladani]

Tooltip icon with ? is not vertically aligned with Remember Me text in login box.

[utsavladani]

Login box screenshot from /wp-login.php page

On the login form the "Remember Me" help icon sits several pixels above the label text it belongs to.

.wp-tooltip is an inline-flex box, so it takes its baseline from the icon it wraps rather than from the surrounding text, and the default baseline alignment then lifts the icon out of line. Adding vertical-align: middle to the wrapper aligns it to the adjacent text instead, and the residual offset then stays at about 0.11em from 100% to 200% text size rather than swinging from -0.34em to +0.02em as it does now.

The meta box header buttons, core's only other tooltip, sit in a container with no adjacent text and render identically before and after.

Trac ticket: https://core.trac.wordpress.org/ticket/65918

## Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: Reproducing the misalignment against trunk, measuring the layout effect at both core tooltip call sites and at 100-200% text size, and drafting the one-line CSS fix. All changes were reviewed and validated by me.

I am not familiar with the exact design for this, but checkbox seems little bit up and tooltip icon is little bit down compare to text. However, the difference isn't noticeable.

@itzmekhokan i have tested the fix in WordPress playground and center alignment appears to be off by pixel

[khokansardar]

The approach changed after further testing, so that description no longer matches the patch. Thanks @utsavladani and @dhruvang21 for catching the remainder in comment:2 and comment:3 — both offsets were real, and both are fixed in the latest commit.

Thanx for this PR, I was noticing the same thing and thought it was by design but I didn't like it (I didn't have time to investigate whether the offset was by design or not).

The PR looks good to me (the commit @itzmekhokan did an hour ago fixes the problem reported by @dhruvang21.

[joedolson]

I know that I fixed this issue at least once, so something must have changed later that misaligned it. Thanks for noting!

[r1k0]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/13202

Environment

• WordPress: 7.2-alpha-63166-src
• Subdirectory: No
• PHP: 8.3.33
• Server: nginx/1.31.4
• Database: mysqli (Server: 8.4.11 / Client: mysqlnd 8.3.33)
• Browser: Chrome 151.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.1

Steps taken

1. On the login screen, check the ? icon alignment with the Remember Me text.
2. ✅ Patch is solving the problem

Expected result

• The "?" should be center-aligned vertically with the Remember Me text.

Additional Notes

• The fix should be ready to add to trunk.

Screenshots/Screencast with results

• Screenshot before:

• Screenshot after:

[timse201]

Can you please add some more space? The extra space the icon uses in WP 7.1, breaks the layout for other languages.

[timse201]

German login page

[nkpathan]

I tested it in the German language using WordPress Playground, and everything is working as expected. The layout, content, and functionality appear correct.

[ocean90]

#66029 was marked as a duplicate.

[joedolson]

In 63448:

Login and Registration: Align tooltip icon with control.

Update CSS for the login and registration screen for the tooltip icon on the Remember Me option so that the icon aligns correctly with the checkbox and input.

Props utsavladani, timse201, nkpathan, khokansardar, dhruvang21, pbiron, r1k0, ocean90, saiful09, joedolson.
Fixes #65918.

[joedolson]

Re-opening for merge to 7.1.1.

[sabernhardt]

#66042 was marked as a duplicate.

[adamsilverstein]

@joedolson thanks for reviewing and committing this for 7.1.1. Would you like to handle the 7.1 branch backport, or would you like me to handle it? Code looks good to me!

[adamsilverstein]

+1 approved for 7.1.1 backport

[joedolson]

In 63483:

Login and Registration: Align tooltip icon with control.

Update CSS for the login and registration screen for the tooltip icon on the Remember Me option so that the icon aligns correctly with the checkbox and input.

Reviewed by adamsilverstein.
Merges [63448] to the 7.1 branch.

Props utsavladani, timse201, nkpathan, khokansardar, dhruvang21, pbiron, r1k0, ocean90, saiful09, joedolson.
Fixes #65918.