<html>
<head>
<title>CSS @property Usage and Tooltips - RJM Programming - September, 2025 ... thanks to https://www.w3schools.com/css/css3_property.asp and https://www.w3schools.com/css/css_tooltip.asp</title>
<style>
@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
#divta span {
float: right;
}
body {
background-color: var(--myColor);
}
/* Tooltip container */
.tooltip {
position: relative;
/* display: inline-block; */
border-bottom: 1px dotted black; /* Add dots under the hoverable text */
cursor: pointer;
}
/* Tooltip text */
.tooltiptext {
visibility: hidden; /* Hidden by default */
width: 130px;
background-color: black;
color: #ffffff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1; /* Ensure tooltip is displayed above content */
}
/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
opacity: 0.3;
visibility: visible;
}
</style>
<script type=text/javascript>
var initval='', lastttnum=0;
function idize() {
initval=document.getElementById('myta').value;
var ids=document.body.outerHTML.split(' i' + 'd="');
for (var jds=1; jds<ids.length; jds++) {
if (ids[jds].split('"')[0].trim() != '') {
if (ids[jds].split('"')[0].toLowerCase() != 'divta') {
document.getElementById('myselect').innerHTML+='<option value=' + ids[jds].split('"')[0].toLowerCase() + '>' + ids[jds].split('"')[0].toLowerCase() + '</option>';
document.getElementById('myselect').innerHTML+='<option value=' + ids[jds].split('"')[0].toUpperCase() + '>' + ids[jds].split('"')[0].toLowerCase() + ' ... and go ...</option>';
document.getElementById('myselect').innerHTML+='<option value=' + (ids[jds].split('"')[0].substring(0,1).toUpperCase() + ids[jds].split('"')[0].substring(1).toLowerCase()).replace(/^Myta$/g,'Divta') + '>' + ids[jds].split('"')[0].toLowerCase() + ' ... and apply class tooltip ...</option>';
}
}
}
// var vlv=document.getElementById('myta').value;
// document.getElementById('myta').innerHTML='<span id=myspan' + lastttnum + ' class="tooltiptext">Hovering over myta<br></span>';
// document.getElementById('myta').value=vlv;
// lastttnum++;
}
function absit(inid) {
var rectis=document.getElementById(inid.replace(/^divta$/g,'myta')).getBoundingClientRect();
document.getElementById('myspan').style.left='' + eval(45 + eval('' + rectis.right)) + 'px';
document.getElementById('myspan').style.top='' + rectis.top + 'px';
}
function anal(selo) {
var newst='';
if (selo.value.trim() != '') {
newst='<style> @property --my' + selo.value.toLowerCase() + 'Color { syntax: "<color>"; inherits: true; initial-value: ' + ('#' + document.getElementById('mycolourpicker').value).replace('##','#') + '; } #' + selo.value.toLowerCase() + ' { background-color: var(--my' + selo.value.toLowerCase() + 'Color); } .tooltip { position: relative; border-bottom: 1px dotted black; cursor: pointer; } .tooltiptext { visibility: hidden; width: 130px; background-color: black; color: #ffffff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { opacity: 0.3; visibility: visible; } </style>';
if (selo.value == selo.value.toUpperCase()) {
document.getElementById('myta').value=newst.replace(/\{/g,'{ ' + String.fromCharCode(10)).replace(/\}/g,'} ' + String.fromCharCode(10) + String.fromCharCode(10)).replace(/\;/g,'; ' + String.fromCharCode(10))
doit(document.getElementById('myta').value);
} else if (selo.value == selo.value.toLowerCase()) {
document.getElementById('myta').value=newst.replace(/\{/g,'{ ' + String.fromCharCode(10)).replace(/\}/g,'} ' + String.fromCharCode(10) + String.fromCharCode(10)).replace(/\;/g,'; ' + String.fromCharCode(10))
} else if (('' + document.getElementById(selo.value.toLowerCase()).className) != '') {
if (('' + document.getElementById(selo.value.toLowerCase()).className).indexOf('tooltip') == -1) {
document.getElementById(selo.value.toLowerCase()).className+=' tooltip';
if (('' + document.getElementById(selo.value.toLowerCase()).title) == '') {
document.getElementById(selo.value.toLowerCase()).title='Hovering over ' + selo.value.toLowerCase();
}
document.getElementById(selo.value.toLowerCase()).innerHTML+='<span id=myspan' + lastttnum + ' class="tooltiptext">Hovering over ' + selo.value.toLowerCase().replace(/^divta$/g,'myta') + '<br></span>';
lastttnum++;
}
} else {
document.getElementById(selo.value.toLowerCase()).className='tooltip';
if (('' + document.getElementById(selo.value.toLowerCase()).title) == '') {
document.getElementById(selo.value.toLowerCase()).title='Hovering over ' + selo.value.toLowerCase();
}
document.getElementById(selo.value.toLowerCase()).innerHTML+='<span id=myspan' + lastttnum + ' class="tooltiptext">Hovering over ' + selo.value.toLowerCase().replace(/^divta$/g,'myta') + '<br></span>';
lastttnum++;
}
}
}
function doit(tv) {
document.getElementById('dstyle').innerHTML+=tv;
}
function changecol(cpo) {
if (document.getElementById('myta').value.indexOf('initial-value:') != -1) {
document.getElementById('myta').value=document.getElementById('myta').value.replace('initial-value:' + document.getElementById('myta').value.split('initial-value:')[1].split(';')[0] + ';', 'initial-value: ' + ('#' + document.getElementById('mycolourpicker').value).replace('##','#') + ';');
}
}
</script>
</head>
<body id=mybody onload="idize();">
<h1 id=myh1>CSS @property Usage and Tooltips</h1>
<h3 id=myh3>RJM Programming - September, 2025</h3>
<h4 id=myh4>Thanks to <a target=_blank id="myaone" href='//www.w3schools.com/css/css3_property.asp'>https://www.w3schools.com/css/css3_property.asp</a> and <a target=_blank id="myatwo" href='//www.w3schools.com/css/css_tooltip.asp'>https://www.w3schools.com/css/css_tooltip.asp</a></h4>
<select id=myselect onchange="anal(this);"><option id=myoption value=''>Optionally select element other than body ...</option></select> <input onchange=changecol(this); id=mycolourpicker type=color value='#9BA19D'></input>
<div id=divta style="width:100%;height:500px;">
<textarea class="tooltip" title="Hovering over myta" onblur="document.getElementById('dstyle').innerHTML+=this.value;" style=font-size:10px;display:inline-block;width:80%;height:500px; id=myta>
<style>
@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
body {
background-color: var(--myColor);
}
/* Tooltip container */
.tooltip {
position: relative;
/* display: inline-block; */
border-bottom: 1px dotted black; /* Add dots under the hoverable text */
cursor: pointer;
}
/* Tooltip text */
.tooltiptext {
visibility: hidden; /* Hidden by default */
width: 130px;
background-color: black;
color: #ffffff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1; /* Ensure tooltip is displayed above content */
}
/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
opacity: 0.3;
visibility: visible;
}
</style>
</textarea>
</div>
<button id=mybutton onclick="doit(document.getElementById('myta').value);" style=background-color:lightgreen;>Apply</button>
<div id=mydiv style=width:50%;height:50%></div>
<!--span id=myspan class="tooltiptext">Some tooltip text</span-->
<div id=dstyle></div>
</body>
</html>