CODEWITHSUNDEEP
htmlcss
Elcid_91
Elcid_91

Reputation: 1681

CSS Display Empty DIV ONLY if there is content

I am attempting to create a div (essentially will become a tooltip) that will display when hovered; however, I need it to display ONLY if there is content in the 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>

Obviously the CSS is not complete with positioning, etc. but Ineed the most important part to work and thats displaying only when there is content in the data-tip

Upvotes: 1

Views: 563

Answers (3)

Banzay
Banzay

Reputation: 9470

Here is one more solution using 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>

Upvotes: 1

rasfa98
rasfa98

Reputation: 11

Maybe try the following selector?

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

}

Upvotes: 0

doğukan
doğukan

Reputation: 27431

You can check empty attributes.

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>

This will also work when it contains spaces with trim() function.

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>

Upvotes: 2

Related Questions