CSS Отображать пустой DIV ТОЛЬКО если есть контент

Question

Я пытаюсь создать div (по сути, станет всплывающей подсказкой), который будет отображаться при наведении курсора; однако мне нужно, чтобы он отображался ТОЛЬКО, если в div

есть контент

[data-tip] {
    position:relative;
}
[data-tip]:after{
    display: none;
    position: absolute;
    content:attr(data-tip);
    padding: 5px 8px;
    background-color: red;
    z-index: 10;
    height: 12px;
    border-radius: 3px;
    white-space: nowrap;
    word-wrap: normal;
}
[data-tip]:hover:after+[data-tip].active{
    display: block;
}

<div className="tooltip active" data-tip="This should display tooltip"></div>
<div className="tooltip" data-tip="">This should not display</div>

Очевидно, что CSS не завершен с позиционированием, et c. но Ineed самая важная часть для работы, и это отображается только при наличии содержимого в data-tip

Answer 1

Вот еще одно решение, использующее css

[data-tip] {
    position:relative;
    height: 40px;
    border: 1px solid lime;
}
[data-tip]:after{
    display: none;
    position: absolute;
    content:attr(data-tip);
    padding: 5px 8px;
    background-color: red;
    z-index: 10;
    height: 12px;
    border-radius: 3px;
    white-space: nowrap;
    word-wrap: normal;
}
[data-tip]:not([data-tip=""]):hover:after{
    display: block;
}

<div className="tooltip" data-tip="">This should not display</div>
<div className="tooltip" data-tip="This should display tooltip">div1</div>
<div className="tooltip" data-tip="">This should not display as well</div>
<div className="tooltip" data-tip="This should display tooltip">this should display again</div>

Answer 2

Вы можете проверить пустые атрибуты.

document.querySelectorAll("[data-tip]").forEach(p => {
  p.getAttribute("data-tip") == '' ? p.style.display = 'none' : '';
});

[data-tip] {
    position:relative;
}
[data-tip]:after{
    display: none;
    position: absolute;
    content:attr(data-tip);
    padding: 5px 8px;
    background-color: red;
    z-index: 10;
    height: 12px;
    border-radius: 3px;
    white-space: nowrap;
    word-wrap: normal;
}
[data-tip]:hover:after+[data-tip].active{
    display: block;
}

<div className="tooltip active" data-tip="This should display tooltip"></div>
<div className="tooltip" data-tip="">This should not display</div>

Это также будет работать, если оно содержит пробелы с функцией trim().

document.querySelectorAll("[data-tip]").forEach(p => {
  p.getAttribute("data-tip").trim() == '' ? p.style.display = 'none' : '';
});

[data-tip] {
    position:relative;
}
[data-tip]:after{
    display: none;
    position: absolute;
    content:attr(data-tip);
    padding: 5px 8px;
    background-color: red;
    z-index: 10;
    height: 12px;
    border-radius: 3px;
    white-space: nowrap;
    word-wrap: normal;
}
[data-tip]:hover:after+[data-tip].active{
    display: block;
}

<div className="tooltip active" data-tip="This should display tooltip"></div>
<div className="tooltip" data-tip="       ">This should not display</div>

Answer 3

Может попробовать следующий селектор?

[data-tip]:not([data-tip=''] {

}