{"id":69882,"date":"2025-09-23T03:01:00","date_gmt":"2025-09-22T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=69882"},"modified":"2025-09-22T17:36:50","modified_gmt":"2025-09-22T07:36:50","slug":"css-tooltip-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-tooltip-primer-tutorial\/","title":{"rendered":"CSS Tooltip Primer Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Tooltip Primer Tutorial<\/p><\/div>\n

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

What’s a tooltip? Wikipedia<\/a> says …<\/p>\n

\nThe 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 (“\u2026 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.\n<\/p><\/blockquote>\n

And what interests us the most about the concept?<\/p>\n

\nWell, we’re always looking for ways to explain the workings of web applications via their webpage HTML elements’ title<\/i> 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<\/i> attributes to help.
\nTooltips are another approach and call on CSS like …
\n
\n\/* Show the tooltip text on hover *\/
\n.tooltip:hover .tooltiptext {
\n opacity: 0.3;
\n visibility: visible;
\n}
\n<\/code>
\n … thanks to W3schools<\/a> here, to go somewhere down<\/strike>up<\/sup> the road<\/strike>avenue<\/sup>, for some types of HTML elements, like the ones with a proper innerHTML<\/i> attribute (but not textarea with it’s special relationship between innerHTML<\/i> and value<\/i> … so there, we had to nest the textarea in a div element)<\/font>\n<\/p><\/blockquote>\n

You could statically arrange the tooltips<\/i>, but, for us here today, we’ve allowed for a dropdown selection to make a dynamically created className<\/sup><\/i> association happen<\/font> …<\/p>\n


\n function anal(selo) {
\n var newst='';
\n if (selo.value.trim() != '') {
\n 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>';
\n if (selo.value == selo.value.toUpperCase()) {
\n document.getElementById('myta').value=newst.replace(\/\\{\/g,'{ ' + String.fromCharCode(10)).replace(\/\\}\/g,'} ' + String.fromCharCode(10) + String.fromCharCode(10)).replace(\/\\;\/g,'; ' + String.fromCharCode(10))
\n doit(document.getElementById('myta').value);
\n } else if (selo.value == selo.value.toLowerCase()) {
\n document.getElementById('myta').value=newst.replace(\/\\{\/g,'{ ' + String.fromCharCode(10)).replace(\/\\}\/g,'} ' + String.fromCharCode(10) + String.fromCharCode(10)).replace(\/\\;\/g,'; ' + String.fromCharCode(10))
\n } else if (('' + document.getElementById(selo.value.toLowerCase()).className) != '') {
\n if (('' + document.getElementById(selo.value.toLowerCase()).className).indexOf('tooltip') == -1) {
\n document.getElementById(selo.value.toLowerCase()).className+=' tooltip';
\n if (('' + document.getElementById(selo.value.toLowerCase()).title) == '') {
\n document.getElementById(selo.value.toLowerCase()).title='Hovering over ' + selo.value.toLowerCase();
\n }
\n document.getElementById(selo.value.toLowerCase()).innerHTML+='<span id=myspan' + lastttnum + ' class=\"tooltiptext\">Hovering over ' + selo.value.toLowerCase().replace(\/^divta$\/g,'myta') + '<br><\/span>';
\n lastttnum++;
\n }
\n } else {
\n document.getElementById(selo.value.toLowerCase()).className='tooltip';
\n if (('' + document.getElementById(selo.value.toLowerCase()).title) == '') {
\n document.getElementById(selo.value.toLowerCase()).title='Hovering over ' + selo.value.toLowerCase();
\n }
\n document.getElementById(selo.value.toLowerCase()).innerHTML+='<span id=myspan' + lastttnum + ' class=\"tooltiptext\">Hovering over ' + selo.value.toLowerCase().replace(\/^divta$\/g,'myta') + '<br><\/span>';
\n lastttnum++;
\n }<\/font>
\n }
\n }
\n<\/code><\/p>\n

… 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<\/i> adjacent to the HTML element being explained, in this changed<\/a> second draft<\/a> CSS @property variables and tooltips web application<\/a>, also below<\/a> …<\/p>\n

\n

\n

Previous relevant CSS Image Clip and Shape Outside Primer Tutorial<\/a> is shown below.<\/p>\n

\"CSS<\/a>

CSS Image Clip and Shape Outside Primer Tutorial<\/p><\/div>\n

Further to the CSS themes of interest regarding yesterday’s CSS Variables Textarea Tutorial<\/a>, today we continue that “theme” regarding …<\/p>\n


\nCSS Image Clip and Shape Outside
\n<\/code><\/p>\n

… inspiration we got from this W3school very useful webpage<\/a>, thanks.<\/p>\n

With this work, there are two display aspects at play …<\/p>\n\n\n\n\n\n
CSS Property<\/th>\nApplicability regarding Shape …<\/th>\n<\/tr>\n
<\/th>\nCircle<\/th>\nEllipse<\/th>\nPolygon<\/th>\n<\/tr>\n
clip-path<\/td>\nYes<\/td>\nYes<\/td>\nYes<\/td>\n<\/tr>\n
shape-outside<\/td>\nYes<\/td>\nYes<\/td>\nNo<\/td>\n<\/tr>\n<\/table>\n

… which you can play around (again involving user input textarea CSS styling elements)<\/font> with this first draft<\/a> CSS Image Clip and Shape Outside web application<\/a> …<\/p>\n