Resolving tooltip and validation message text wrapping issues in AEM 6.5 authoring dialogs

This article explains how to identify and troubleshoot issues where tooltip and validation message text in Adobe Experience Manager (AEM) 6.5 authoring dialogs wraps incorrectly, causing words to be split or visual spacing problems.

Description description

Environment

  • Adobe Experience Manager (AEM) 6.5
  • Authoring dialogs using out-of-the-box components

Issue/Symptoms

  • Tooltip and validation message text in authoring dialogs displays with improper line breaks or visual spacing.
  • Words may be split in the middle and pushed to the next line, even when the tooltip is short (for example, ‘Please fill out this field’).

Cause

This issue is typically caused by a CSS rule in an out-of-the-box client library that applies word-break or spacing properties that cause words to split across lines in tooltips and validation messages.

Resolution resolution

To fix the tooltip and validation message text wrapping issue, follow these steps:

  1. Reproduce the issue by adding a short tooltip or validation message (such as 'Please fill out this field’) to an authoring dialog field and observe the text wrapping behavior in the dialog UI.

  2. Use browser developer tools (such as Chrome DevTools) to inspect the tooltip or validation message element:

    • Right-click the affected tooltip and select Inspect.
    • In the Computed tab, review the following CSS properties: width, max-width, word-break, overflow-wrap, and white-space.
  3. Temporarily uncheck or disable any CSS rules loaded from project-specific client libraries (for example, /etc.clientlibs/... or /apps/...).

  4. Check if the tooltip displays correctly after disabling these rules. If the issue persists and is traced to an out-of-the-box client library (such as /libs/cq/gui/components/authoring/dialog/clientlibs/all.min.*.css), note that a code or configuration change may not be possible directly.

  5. If you are unable to resolve the issue through custom CSS overrides or configuration, review the latest AEM 6.5 service packs and release notes to determine if a public fix is available. If no public fix is available, consider reaching out to Adobe Support for further assistance.

  6. After making any changes or applying updates, verify that tooltips and validation messages display correctly without unwanted word breaks or spacing issues.

recommendation-more-help
experience-cloud-kcs-help-kbarticles