我有一个字体awesome div，它漂浮在我的图片的顶部，提供图片的细节，这些细节是从mysql数据库中提取的。
当我将鼠标悬停在这个（info）字体的图标上时，一个很小的内联就会打开，其中包含来自mysql的内容。
现在，当内容为空时，我不希望字体出现。
下面是我的代码。

<div id="hotspot1" class="hotspot" style = "position: fixed;">
                <i class="fa fa-info-circle" style="font-size:48px;color:cyan"></i>
                <div class="hover-popup well">
                <?php 
                    if ($details == null) {
                        echo "class='display-none';";
                    }
                    else {
                        echo $details; 
                    }
                    ?>
                </div>
            </div>

此悬停弹出窗口的css是

# hotspot1 {

            right:93%;
            top:3%;
        }

        .hotspot {
            line-height:20px;
            text-align:center;
            position:absolute;
            cursor: pointer;
        }

        .hotspot .text {
            width:80px;
            height:20px;
        }

        .hover-popup {
            display:none;
            z-index:auto;
        }

        .hotspot:hover .hover-popup {
            display:inline;
            position:absolute;
            left:100%;
            top:0;
            width:300px;
            height: auto;
            border:2px solid #000;
            margin: 20px;
            padding: 20px;
            font-size: 16px;
            background: #FBF0D9;
            font-style: oblique;

        .display-none {
            display:none;
        }

现在，当有空值时，它会按字面意思显示“class='display none'”
我该怎么做才能在空值期间使图标完全消失？
我应该使用js还是jquery？