How do I turn an image into a popup with only text

Question

I'm trying to have a popup show when an image is clicked. All I can find is how to enlarge an image. Below is the code I have but it's not working. I'm not sure which part is wrong... Am I allowed to have a table in the span tag?

.popup {
margin-top: 10%;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

.popup .popuptext {
visibility: hidden;
width: 250px;
background-color: #5FACD7;
color: #000000;
text-align: center;
border-radius: 6px;
Padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;

}

.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}

@-websit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

<div class="popup" onclick="popup1()">
<img src="../media/hours.jpg" alt="Hours of Operation" width="300" 
height="200"/>
<span class="popuptext" id="myPopup">
    <table>
    <tr>
    <th>Day</th>
    <th>Times</th>
    </tr>
    <tr>
        <td> Monday - Wednesday</td>
        <td> Thursday</td>
        <td>Friday</td>
        <td>Saturday/Sunday</td>
    </tr>
    <tr>
        <td>9:00 a.m. - 6:00 p.m.</td>
        <td>9:00 a.m. - 9:00 p.m.</td>
        <td>9:00 a.m. - 8:00 p.m.</td>
        <td>10:00 a.m. - 6:00 p.m.</td>
    </tr>
    </table>
    </span>
</div>

<div class="popup" onClick="=popup2()">
<img src="../media/tickets.jpeg" alt="General Admission" width="300" 
height="200"/>
<span class="popuptext" id="myPopup2">
<table>
    <tr>
    <th></th>
    <th>Prices</th>
    </tr>
    <tr>
        <td>Adults: </td>
        <td>Children (5-12): </td>
        <td>Seniors/Students with ID: </td>
        <td>Adult Members: </td>
        <td>Child Members: </td>
    </tr>
    <tr>
        <td>$12.00</td>
        <td>$6.00</td>
        <td>$8.00</td>
        <td>Free</td>
        <td>Free</td>
    </tr>
    </table>
    </span>
</div>

Answer 1

Check This.

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}

.popup {
  margin-top:10%;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.popup .popuptext {
    visibility: hidden;
    width: 250px;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}


.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}


.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

<div class="popup" onclick="myFunction()"><img src="http://abravmsd.com/images/ab_fb.png" width="30" height="30">
  <span class="popuptext" id="myPopup">This is a popup text</span>
</div>

Answer 2

You can insert some text after the image after click;

  $('<span class="absolute">Test</span>').insertAfter(this);

And make wrap it in a div the same height and width of the image, and make it position: relative; and then absolutely position it above the image.

.absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%)
}

Here is an example:

$('.click-text').click(function() {
  if (!$(this).next('span.absolute').length) {
    $('<span class="absolute">Test</span>').insertAfter(this);
  } else {
    $(this).next('span.absolute').remove();
  }
});

.img-container {
  height: 100px;
  width: 100px;
  position: relative;
}
.absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="img-container">
  <img src="http://via.placeholder.com/100x100" class="click-text">
</div>

Answer 3

You can do this by: http://www.jacklmoore.com/colorbox/ See Demo: http://www.jacklmoore.com/colorbox/example1/ See: Inline HTML