Как обрезать текст добавив ... в конце, и при наведении мышью отобразить полный текст в всплывающем сообщении?

Обрезать текст вообще не проблема

Как при наведении мышью на текст отобразить полный текст в всплывающем сообщении ( если текст обрезан ) ?

Поищите в гугле поиском tooltip(всплывающая подсказка) - огромное количество примеров и готовых библиотек как это сделать

Дмитрий, если бы я нашел то я бы тут не спрашивал. Есть на бустрап но мне не подходит

Mdmitr, Первая же ссылка на простую подсказку без бутстрапа
www.css-tricks.ru/articles/css/easy-css-tooltip#

Дмитрий, сайт на React js а подсказка нужна только в том случае если текст обрезан

Mdmitr, А, понял. Как вариант: определить обрезался ли текст можно сравнением свойств ScrollWidth и ClientWidth. Если разные значит обрезался. Соответственно в реакте в DidMount проверить это и установить hidden элементу подсказки, если обрезался. Вроде должно сработать.

Дмитрий, нет, менять функциональные компоненты на классы во всем проекте будет глупым решением

Mdmitr,

менять функциональные компоненты на классы во всем проекте будет глупым решением

Решение не глупое, вам просто надо попробовать подумать, как внедрить необходимый функционал не изменяя родительские компоненты.

Mdmitr, Другой вариант запускать промис, который через энное количество милисекунд будет проверять вашу надпись и менять состояние компонента, в котором находится тултип

Mdmitr, сделайте HOC который будет показывать подсказку. Изменения будут минимальные. Если у вас все такое прямо функциональное и модно-молодежное - можно на хуках, useEffect вам в помощь.

Mdmitr, для подсказки можно использовать html атрибут title, подставив его в нужный элемент с полным текстом.