Hide DIV when content displayed is has NULL value in database

Question

I have a font awesome div which floats on top on my image, to give the image details, which are extracted from the mysql database.

When I hover over this (info) font awesome icon, a tiny inline opens up with the content from mysql.

Now when the content is NULL, I don't want the font awesome to show up at all.

the following is my code.

<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>

The CSS for this hover pop up is

#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;
        }

Now when there is a null value, it literally displays "class = 'display-none'"

What can I do to vanish the icon totally during null values?

Should I use JS or JQuery?

Answer 1

The class attribute needs to be inside the element it applies to, you are currently echo ing outside of any elements, which is why you're seeing it on the page.

I can't work out exactly what it is you're trying to achieve but it seems that you want to show some particular HTML when $details is not null .

This should at least give you some clues,

<div id="hotspot1" class="hotspot" style="position: fixed;">

   <?php if ($details != null): ?>

      <i class="fa fa-info-circle" style="font-size:48px;color:cyan"></i>

      <div class="hover-popup well">
         <?= $details; ?>
      </div>

   <?php endif; ?>

</div>   

In the above code, if $details is not null then the HTML between the PHP blocks will be output, otherwise not. You may want to put all the HTML between the PHP blocks.

Answer 2

You are confusing style and class with the above notation, perhaps something like this would be better?

<div id="hotspot1" class="hotspot" style = "position: fixed;">
    <i class="fa fa-info-circle" style="font-size:48px;color:cyan"></i>

        <?php
            $style=is_null( $details ) ? "style='display:none'" : "";
        ?>
        <div class="hover-popup well" <?php echo $style;?> >

        </div>
</div>

Alternatively, rather than adding inline styles assign a class as you initially tried but define the class in the css somewhere. You could then use a similar notation but reference the class instead - like:

<style>.dispnone{ display:none; }</style>

<?php
    $class=is_null( $details ) ? "class='dispnone'" : "";
?>

<div class="hover-popup well" <?php echo $class;?> >