Need some help with Grid CSS in a tooltip

Pro

Sheet Author

API Scripter

You start with this:

sheet-tooltip {
              position: relative;
              display: grid;
              grid-area: tooltip;
              grid-template: "ttlabel ttinput";
            }

there isnt a grid-template property. I suspect that is meant to be grid-template-areas.

June 05 (5 years ago)

Sheet Author

API Scripter

No change...here is the rest of the CSS

.sheet-main {
    font-family: Verdana, sans-serif;
            font-size: small;
            font-weight: normal;
            padding: 0;
            margin: .25in;
            margin-bottom: calc(.25in - 1em);
    display: grid;
            grid-template:
                "personal personal"
                "stats stats"
                "melee melee"
                "ranged ranged"
                "advantages skills"
                "spells spells"
                "equipment equipment"
                "other_equipment other_equipment"
                "notes notes"
                 ;
                 grid-gap: .05in;
                }
    /*===== Roll Button Formatting ====*/
    button[type="roll"].sheet-main:before {
    content: ""!important;
    display: none;
    }
    button[type=roll].sheet-main {
        font-size: 1em;
        color: #000000;
        padding: 0;
        margin: 0px;
        height:14px;
        background:transparent;
        transition: 0.3s;
        border:none;
    }
    .sheet-main button:hover {
    background: #FFFFFF;
    background: -webkit-radial-gradient(center, #FFFFFF, #FF1401);
    background: -moz-radial-gradient(center, #FFFFFF, #FF1401);
    background: radial-gradient(ellipse at center, #FFFFFF, #FF1401);
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border: 1px solid #800000;
    }
    /* ===== Input Formatting ==== */
    input[type="text"].sheet-main {
        font-family: Verdana, sans-serif;
            font-size: 80%;
            font-weight: bold;
            color: #000000;
            padding: 0;
            margin:0;
            align-self:stretch;
            border: none;
    }
    .sheet-main select:hover {
        -webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43); 
        box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43);
    }
    .sheet-main textarea:hover {
        -webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43); 
        box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43);
    }
    .sheet-main input[type="text"]:hover {
        -webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43); 
        box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43);
    }
    .sheet-main input[type="number"]:hover {
        -webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43); 
        box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43);
    }
    .sheet-main input[type="radio"]:hover {
        -webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43); 
        box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43);
    }
    .sheet-main input[type="checkbox"]:hover {
        -webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43); 
        box-shadow: inset 0px 0px 4px 2px rgba(0,214,255,0.43);
    }

    .sheet-attrspan {
        font-family: Verdana, sans-serif;
                font-size: small;
                font-weight: normal;
    }
        /*==== Tooltip ====*/
        .sheet-tooltip {
              position: relative;
              display: grid;
              grid-area: tooltip;
              grid-template-areas: "ttlabel ttinput";
            }

            .sheet-tooltip .sheet-tooltiptext {
              font-family: Verdana, sans-serif;
                font-size: small;
                font-weight: normal;
              visibility: hidden;
              width: 120px;
              background-color: #ffffe1;
              color: #000000;
              text-align: center;
              border-radius: 2px;
              padding: 2px;
              position: absolute;
              z-index: 1;
              bottom: 125%;
              left: 50%;
              margin-left: -60px;
              opacity: 0;
              transition: opacity 0.3s;
            }

            .sheet-tooltip .sheet-tooltiptext::before {
                bottom: -20px;
                content: " ";
                display: block;
                height: 20px;
                left: 0;
                position: absolute;
                width: 100%;
            }

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

            .sheet-tooltip:hover .sheet-tooltiptext {
              visibility: visible;
              opacity: 1;
            }
            .sheet-tooltip .sheet-ttlabel { grid-area: ttlabel; }
            .sheet-tooltip .sheet-ttinput { grid-area: ttinput; }
            .sheet-tooltip .sheet-ttlabel {width: 80px;}
            .sheet-tooltip .sheet-ttinput {width: 40px;}
            .sheet-tooltip .sheet-ttinput input {
                font-family: Verdana, sans-serif;
                font-size: small;
                font-weight: normal;
                height: inherit;
                border: solid 1px black;
                
            }

June 05 (5 years ago)

Pro

Sheet Author

API Scripter

Actually, it looks like there might be a lot more amiss than that. the grid-template section should probably be on sheet-template-tooltiptext, for example.

June 05 (5 years ago)

Sheet Author

API Scripter

Well I am only making it worse.

June 05 (5 years ago)

Pro

Sheet Author

API Scripter

Here's some working code. I stripped it down to essentials, so all the positioning and appearance information is gone. You'll want to add that back in. But try it just like this first to confirm its working.

HTML: (I added "This is test" text just to find it easier. you can remove that once its working.)

<div class="field">
    <div class="tooltip">
        This is a test
        <span class="attrspan" name="attr_strength" value=""></span>
        <span class="tooltiptext">
            <div class="ttlabel">ST:</div>
            <div class="ttinput"><input type="text" name="attr_strength" /></div>
        </span>
    </div>
</div>

CSS:

.sheet-tooltip {
    position: relative;
    padding: 15px 20px;
    position: relative;
    text-align: center;
    width: 200px;
    cursor:help;
  }
  .sheet-tooltip .sheet-tooltiptext {
    position: absolute;
    opacity: 0;
    width: 100%;
    display: grid;
    grid-template-areas: "ttlabel ttinput";
  }
  .sheet-tooltip .sheet-tooltiptext::before {
      content: " ";
      display: block;
      position: absolute;
  }
  .sheet-tooltip:hover .sheet-tooltiptext {
    opacity: 1;
  }

June 05 (5 years ago)

Andreas J.

Forum Champion

Sheet Author

Translator

GiGs said:
You start with this:
sheet-tooltip {
              position: relative;
              display: grid;
              grid-area: tooltip;
              grid-template: "ttlabel ttinput";
            }
there isnt a grid-template property. I suspect that is meant to be grid-template-areas.

I looked it up, and there is a grid-template-property.

It functions as a shorthand property for defining grid-template-rows, grid-template-columns, and grid-template-areas. This was new to me as well, as most guides refer to the longhand properties and skipping this one.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

June 05 (5 years ago)

Pro

Sheet Author

API Scripter

I stand corrected!

June 05 (5 years ago)

Andreas J.

Forum Champion

Sheet Author

Translator

GiGs said:
I stand corrected!

We both learned something new today. High Five!

June 05 (5 years ago)

Sheet Author

API Scripter

Edits made.

                    <div class="field">
                        <div class="tooltip">
                            <span class="attrspan" name="attr_strength" value=""></span><span class="tooltiptext">
                            <div class="ttlabel">ST:</div>
                            <div class="ttinput"><input type="text" name="attr_strength" /></div>
                         </span>
                        </div>
                    </div>

        /*==== Tooltip ====*/
        .sheet-tooltip {
              position: relative;
              display: grid;
              grid-area: tooltip;
              grid-template: "ttlabel ttinput";
            }
            .sheet-tooltip .sheet-tooltiptext {
                display: grid;
                
                grid-template-columns: 0fr 1fr;
            }
            .sheet-tooltip .sheet-tooltiptext {
              font-family: Verdana, sans-serif;
                font-size: small;
                font-weight: normal;
              visibility: hidden;
              width: 120px;
              background-color: #ffffe1;
              color: #000000;
              text-align: center;
              border-radius: 2px;
              padding: 2px;
              position: absolute;
              z-index: 1;
              bottom: 125%;
              left: 50%;
              margin-left: -60px;
              opacity: 0;
              transition: opacity 0.3s;
            }

            .sheet-tooltip .sheet-tooltiptext::before {
                bottom: -20px;
                content: " ";
                display: grid;
                height: 20px;
                left: 0;
                position: absolute;
                width: 100%;
            }

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

            .sheet-tooltip:hover .sheet-tooltiptext {
              visibility: visible;
              opacity: 1;
            }
            .sheet-ttlabel {
                display:grid;
                grid-area: ttlabel;
            }
            .sheet-ttinput {
                display:grid;
                grid-area: ttinput;
            }
            .sheet-ttlabel {width: 40px;}
            .sheet-ttinput {width: 40px;}
            .sheet-ttinput input {
                font-family: Verdana, sans-serif;
                font-size: small;
                font-weight: normal;
                height: inherit;
                border: solid 1px black;
                
            }

And here is the result..."ST:" has disappeared and still wrestling with row and column dimensions.

June 05 (5 years ago)

Edited June 05 (5 years ago)

Pro

Sheet Author

API Scripter

Those aren;t the edits I suggested. I suggested first doing a very barebones version, without much CSS formatting, just to confirm its working.

Regardless, it looks like the popup is working - its just you need to get the formatting correct. That's not my field, I'll leave others to help you there.

June 05 (5 years ago)

Edited June 05 (5 years ago)

Sheet Author

API Scripter

Yep, it was working the whole time...but my main issue is the formatting.

I planned to use the pop-up as the mod input....was going to use it as points input also but the new version of GCS changes that. I will be changing my sheet format to match.

Now it just needs to be a pop-up with the right formatting that will show base stat in the tooltip and the attribute backed span/tooltip will be the modified stat.

June 05 (5 years ago)

Pro

Sheet Author

API Scripter

The version i posted does have the input in the popup, and you can edit it. Maybe trim back down to that, and add the formatting bit by bit till you get it where you need it.

June 05 (5 years ago)

Sheet Author

API Scripter