Да, на чистом CSS можно показывать tooltip только если текст не умещается в блоке. Для этого можно использовать псевдокласс :hover и свойство text-overflow.
Установим элементу, в котором возможно появление tooltip, следующие CSS свойства:
1. overflow: hidden;
- задаем значение hidden для свойства overflow, чтобы текст, который не умещается в блоке, был скрыт.
2. white-space: nowrap;
- используем значение nowrap для свойства white-space, чтобы текст не переносился на новую строку.
3. text-overflow: ellipsis;
- устанавливаем значение ellipsis для свойства text-overflow, чтобы отображалось многоточие, когда текст обрезается.
Для создания tooltip, которая появляется только когда текст обрезается, мы можем использовать псевдоэлемент ::after и атрибут content, чтобы задать содержимое tooltip.
Пример CSS кода для создания такой tooltip:
.tooltip-container { position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; /* Пример значения ширины блока */ } .tooltip-container:hover::after { content: attr(data-tooltip); /* Получаем значение из атрибута data-tooltip элемента */ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: #000; color: #fff; padding: 5px 10px; border-radius: 5px; white-space: nowrap; z-index: 999; }
Теперь, чтобы использовать эту tooltip, необходимо добавить атрибут data-tooltip к элементу, устанавливающий значение текста tooltip.
<div class="tooltip-container" data-tooltip="Длинный текст, который не помещается в блоке"></div>
При наведении курсора на этот элемент, tooltip будет отображаться только тогда, когда текст обрезается и не умещается в блоке, и будет содержать значение, указанное в атрибуте data-tooltip.