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

Question

[Gedonist]

Для текста в блоке установлены стили:

white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 350px;

Также сделан тултип на чистом CSS, в котором показывается полный текст, когда наводишь на блок.
А можно ли сделать так, чтобы тултип появлялся, только если текст не уместился?
Если строка полностью уместилась в блоке, то при наведении ничего не появляется, если страка обрезалась и появилось троеточие, то при наведении появляется тултип.

Есть ли какие-то эвенты, по которым можно понять что текст не уместился и показалось троеточие?

Answer 1

[Семён Окулов]

На чистом CSS нет, тут можно сделать с помощью JS

const block = document.getElementById('your-block-id'); // Замените 'your-block-id' на актуальный идентификатор вашего блока

if (block.scrollWidth > block.offsetWidth) {
  // Текст обрезается и появляется троеточие
  // В этом случае вы можете добавить обработчик события наведения мыши, чтобы показать тултип
  block.addEventListener('mouseenter', showTooltip);
  block.addEventListener('mouseleave', hideTooltip);
} else {
  // Текст полностью умещается в блоке
  // В этом случае вы можете удалить обработчики событий или не отображать тултип вообще
  block.removeEventListener('mouseenter', showTooltip);
  block.removeEventListener('mouseleave', hideTooltip);
}

function showTooltip() {
  // Код для показа тултипа
}

function hideTooltip() {
  // Код для скрытия тултипа
}

Answer 2

[senator]

Проверять размер внутреннего тега, если он больше внешнего то показывать tooltip

Comments

[Gedonist]

проверять на js?
или в css есть какие-то конструкции типа
div1:width > div2:width {display: none}

[senator]

Gedonist, да только на js

[senator]

Gedonist,

if (target.scrollWidth > target.offsetWidth) {
  tooltip.style.display = 'block';
}

[Gedonist]

senator, понял, спасибо!