I am trying to get a tooltip's contents to display:grid. I am not having much success. /*==== Tooltip ====*/
.sheet-tooltip {
position: relative;
display: grid;
grid-area: tooltip;
grid-template: "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;
} <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>
