Можно ли на чистом CSS показывать tooltip, только если текст не умещается в блоке?

Да, на чистом 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.