Custom HTML Popup inside of Cell

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #16800



    I am trying to execute a custom javascript/div code within a column of cells. It is for a small info button that when clicked, displays a “popup” with a description of the item listed in the row. Below is the CSS, HTML and SCRIPT that I am using. Unfortunately, the popup will only display “within” the cell in which the HTML is located. And, because that cell is small, it is not visible at all. Is it possible to overlay the DIV so that it appears highest on the z-index, and therefore in front of all the other cells when it is clicked?

    .popup {
    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: 160px;
    background-color: #555;
    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;

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

    @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
    <body style=”text-align:center”>

    <div class=”popup” onclick=”myFunction()”>ⓘ
    <span class=”popuptext” id=”myPopup”>This module will provide users with a high-level overview of patents, copyrights, trademarks, trade secrets, and confidentiality. It is generally intended as an introduction to more detailed programs for each.</span>

    // When the user clicks on div, open the popup
    function myFunction() {
    var popup = document.getElementById(“myPopup”);


    Hello, @rguarnieri !
    Sorry for a late reply on forum. Fortunately, your problem has been already resolved. Don’t hesitate to contact us again – we’re always glad to hear from you.
    Have a nice day!

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.
Thanks so much! Please Enter Your Info Below To Get PRO Discount and Gifts