CSS Tooltip Primer Tutorial

CSS Tooltip Primer Tutorial

Again, CSS themes of interest regarding yesterday’s CSS Image Clip and Shape Outside Primer Tutorial are here for today’s Tooltip tutorial, where we have chosen the day before’s CSS Variables Textarea Tutorial‘s web application to be the one to work with and expand.

What’s a tooltip? Wikipedia says …

The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button’s function, what an abbreviation stands for, or the exact absolute time stamp over a relative time (“… ago”). In common practice, the tooltip is displayed continuously as long as the user hovers over the element or the text box provided by the tool.[1] It is sometimes possible for the mouse to hover within the text box provided to activate a nested tooltip, and this can continue to any depth, often with multiple text boxes overlapped.

And what interests us the most about the concept?

Well, we’re always looking for ways to explain the workings of web applications via their webpage HTML elements’ title attributes, which, on non-mobile can happen hovering over the element. But this does not work for mobile. There, and for mobile, we, more and more, use textbox placeholder attributes to help.
Tooltips are another approach and call on CSS like …

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
opacity: 0.3;
visibility: visible;
}

… thanks to W3schools here, to go somewhere down^up the road^avenue, for some types of HTML elements, like the ones with a proper innerHTML attribute (but not textarea with it’s special relationship between innerHTML and value … so there, we had to nest the textarea in a div element)

You could statically arrange the tooltips, but, for us here today, we’ve allowed for a dropdown selection to make a dynamically created class^Name association happen …


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++;
}
}
}


… to make an existant HTML element one that the mobile user taps (to :hover) and the non-mobile user just hovers over, to see the resultant tooltip adjacent to the HTML element being explained, in this changed second draft CSS @property variables and tooltips web application, also below …

Previous relevant CSS Image Clip and Shape Outside Primer Tutorial is shown below.

CSS Image Clip and Shape Outside Primer Tutorial

Further to the CSS themes of interest regarding yesterday’s CSS Variables Textarea Tutorial, today we continue that “theme” regarding …


CSS Image Clip and Shape Outside


… inspiration we got from this W3school very useful webpage, thanks.

With this work, there are two display aspects at play …

… which you can play around (again involving user input textarea CSS styling elements) with this first draft CSS Image Clip and Shape Outside web application …

Previous relevant CSS Variables Textarea Tutorial is shown below.

CSS Variables Textarea Tutorial

Today we’ve got a “proof of concept” CSS web application idea that is inspired by this W3school’s webpage, thanks, but adding user interaction functionality, regarding …


CSS @property variables


… bringing some Javascript feeling logic excitement to CSS styling smarts. You can try this user interactive approach with this first draft CSS @property variables web application …

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.