Показать tooltip в HTML только при активации ellipsis

Быстрый ответ

Чтобы показывать всплывающую подсказку при наведении курсора только в случае, когда текст сокращён до многоточия, воспользуйтесь JavaScript. Проверьте, превысил ли scrollWidth элемента его clientWidth. Если обнаружено переполнение, добавьте атрибут title, и подсказка будет показана.

// Используем JavaScript для сравнения `offsetWidth` и `scrollWidth`
element.offsetWidth < element.scrollWidth ? element.title = element.textContent : element.removeAttribute('title');

Чтобы гарантировать отображение многоточия, применьте следующий CSS:

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

Назначьте элементу класс .ellipsis и включите JavaScript для проверки наличия переполнения при наведении. Таким образом, подсказка будет показана только когда это необходимо.

Завершение

С jQuery вы можете задать обработчик событий, который будет "следить" за наличием многоточия:

// Следите за моментом готовности DOM!
$(document).ready(function(){
  $('.ellipsis').on('mouseenter', function() {
    var $this = $(this);
    $this.attr('title', $this.offsetWidth < $this.scrollWidth ? $this.text() : '');
  });
});

Тренажёр для всплывающих подсказок: оптимизируем производительность

Совершенствуем работу всплывающих подсказок:

• Закэшируйте jQuery-объект под именем $this для увеличения производительности.
• Настройте взаимодействие с подсказкой, используя CSS-свойства pointer-events и position:relative.
• Настройте видимость и стиль всплывающих подсказок, используя свойства box-shadow, border-radius, opacity и visibility.

Меняющийся текст: управление динамическим контентом

Для управления динамическим контентом следует:

• Проверять наличие переполнения после добавления новых элементов в DOM или изменения существующих.
• Динамически добавлять и удалять атрибут title в зависимости от наличия переполнения.
• Эффективно обновлять подсказки для всех элементов с использованием jQuery классовых селекторов.

Исскуственно подразделяемый JavaScript

Для тех, кто предпочитает изящество чистого JavaScript, вот вам пример кода:

// Функция, наглядно демонстрирующая преимущества forEach() 
document.querySelectorAll('.ellipsis').forEach(function(el) {
  el.addEventListener('mouseenter', function() {
    if (this.offsetWidth < this.scrollWidth && !this.title) {
      this.title = this.innerText;
    }
  });
});

Доступность: бережём всплывающие подсказки

Главным правилом при улучшении UX всплывающих подсказок является сохранение их доступности:

• Подсказки должны быть понятными для всех пользователей, включая пользователей скринридеров.
• Применяйте aria-label или aria-labelledby для более эффективного взаимодействия со скринридерами и управления атрибутом title.

Мир совместимости и сафари кроссбраузерности

Убедитесь, что ваше решение корректно функционирует во всех браузерах, включая Internet Explorer.

Соревнования на время: производительность

Прежде всего, стремитесь к минимальному воздействию на производительность: избегайте тяжёлых библиотек и сложного кода, чтобы не замедлять загрузку страницы.

Танго с сенсорными экранами

Не забывайте о сенсорных экранах и подумайте, как показать подсказки без использования событий наведения, возможно, с помощью touchstart.

Визуализация

В качестве примера возьмем чемодан, который не закрывается из-за слишком большой этикетки:

Маленькая этикетка: [Джонатан Эпп...]

Лишь при обрезании имени, чемодан предоставит больше информации:

[Джонатан Эпп...] ↔️ Всплывающая подсказка активирована: "Джонатан Эпплсид"

[Джонатан] ↔️ Всплывающая подсказка не требуется, дополнительной информации нет

Многоточие как загадочная улыбка, намекающая на то, что история ещё не окончена, раскрывает дополнительную информацию только при необходимости.

Полезные материалы

1. Обрезка текста с многоточием в CSS | CSS-Tricks — Разбор использования многоточия для обрезания текста в CSS.
2. Как определить, заканчивается ли текст многоточием – Stack Overflow — Сборник методов для обнаружения многоточия при переполнении текста.
3. Свойство text-overflow в CSS – W3Schools — Анализ свойства text-overflow в CSS.
4. Пример CSS всплывающей подсказки на многоточие – CodePen — Демонстрация практического использования подсказок для текста с многоточием.
5. Распознавание символов на Android – CodeProject – Обсуждение распознавания символов, включая определение текста и многоточия.