CSS Display Empty DIV ONLY if there is content

0

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>

ANSWER 

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>



Expand snippet