Probably the easiest way to implement hover text on a web page is by use of the HTML title attribute.

Here is an example.

I am here.

Hover over the word "here" in the above sentence. The text will pop up as a tooltip. Phones and tablets will need to tap on "here" because they don't have a mouse for hovering on anything.

Each browser implements the hover according to its independent programming. Generally, the tooltip will be below the mouse pointer.

Here is the code for the above example.

I am <span title="This article.">here</span>.

The above title attribute is in a span tag. The title attribute can be used in HTML tags that contain content, including a linking tags, img image tags, and p paragraph tags. The examples in this article all use the span tag.

Noticeability

Whether computer or phone, the user won't know a "title" tooltip is available unless it is explained or marked as such.

Depending on your page requirements, you may want to mark the location of titles. Perhaps subtle, a way that isn't distracting yet is noticeable. Here's one way to do it.

The dotted underline can be considered a subtle hover mark.

When you hover over the words with the dotted line underneath, the tooltip will pop up.

Here is the source code for the above example.

The dotted underline can be considered a <span style="border-bottom:1px dotted #666;" title="Some things are subtle and some things are not subtle.">subtle hover</span> mark.

The above span tag has two attributes. One attribute is for the CSS style, and the other is for the tooltip text.

style="border-bottom:1px dotted #666;"
title="Some things are subtle and some things are not subtle."

Multi-line Tooltip

When you want a title with line breaks, don't use the HTML br tag. Instead, simply insert a line break within the title text.

This example will display the ubiquitous "roses are red" poem as a tooltip.

Do you like the roses are red poem?

And here is the code.

Do you like the <span style="border-bottom:1px dotted #666;" title="Roses are red.
Violets are blue.
Sugar is sweet.
And so are you."><i>roses are green</i></span> poem?

As before, there is a style atribute and a title attribute.

style="border-bottom:1px dotted #666;"
title="Roses are red.
Violets are blue.
Sugar is sweet.
And so are you."

With the title attribute, it is easy to implement tooltips on hover.

(This content first appeared in Possibilities newsletter.)

My most-often use for transparent text is for centering text. Let's suppose a headline needs to be centered without considering a note appended to it.

Here is a simple demonstration of a headline that is not centered the way I want it.

Who is
best? (Will!)

I don't want the "(Will!)" to be considered when centering the headline.

Here is the code for the above. As we go along, you'll see changes to this code.

<h1 style="text-align:center;">
Who is<br>
best? 
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
</h1>

To center that last line, the text on the right also needs to be prepended on the left to balance the line.

Who is
(Will!) best? (Will!)

But that doesn't look nice. Here's the source code so you can follow along with the changes.

<h1 style="text-align:center;">
Who is<br>
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
best? 
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
</h1>

To make it look nice, we'll use transparent text on the left.

Who is
(Will!) best? (Will!)

Yes, that is what I want. See:

<h1 style="text-align:center;">
Who is<br>
<span style="color:transparent; font-size:60%; font-weight:normal;">(Will!)</span>
best? 
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
</h1>

The second line of the header appears to be centered without considering the note appended to it.

HTML symbols can also be published transparent. Here is a quick example with arrows.

→ Who is
best? ←

With balancing arrow symbols:

→ Who is →
← best? ←

With transparent balancing arrows:

→ Who is →
← best? ←

Here is the HTML code for the above three examples.

<h1 style="text-align:center;">
&rarr; 
Who is
<br>
best?
&larr;
</h1>

<h1 style="text-align:center;">
&rarr; 
Who is
&rarr;
<br>
&larr;
best?
&larr;
</h1>

<h1 style="text-align:center;">
&rarr; 
Who is
<span style="color:transparent;">&rarr;</span>
<br>
<span style="color:transparent;">&larr;</span>
best?
&larr;
</h1>

Now you have another skill. For centering, a technique is to use transparent balancing text or symbols. The balance stays in play even with font size changes.

(This content first appeared in Possibilities newsletter.)

Unordered lists in HTML web pages generally use bullets to begin list items. Sometimes circles or squares. But it doesn't have to be that way.

You can use an image instead of bullets.

Here is how to do it.

1. Make an image to use. The image must be a size suitable for the list you will be using it with. Put the image on your server and note its URL.

2. Make a CSS class for the list items you want to affect. Specify the URL of the image to use.

   Example:

   <style type="text/css">
   .my-list-image {
   list-style-image:url('https://www.willmaster.com/possibilities/images/uni-head.png');
   }
   </style>
   

3. To implement, use the class name my-list-image in the ul or ol tag. (Or any other class name that suits you.)

   Example:

   Here is code for an example (displayed at the next list item).

   <ul class="my-list-image">
   <li>The unicorn head image can be replaced by any other image you intend to use.</li>
   <li>The image needs to be correctly sized before using it as a list bullet.</li>
   <li>You can see possibilities now, I am certain.</li>
   </ul>
   

4. Here is what the above code renders.

   • The unicorn head image can be replaced by any other image you intend to use.
   • The image needs to be correctly sized before using it as a list bullet.
   • You can see possibilities now, I am certain.

The unicorn head was cropped from a larger image. The cropped image was then reduced to a size suitable for the example list.

To reiterate, when you want to use your own image instead of bullets for your list items, this CSS is what you need:

list-style-image:url('[IMAGE_URL]');

Replace [IMAGE_URL] with the URL to the image you wish to use. The list-style-image property can be used inline or within a style sheet.

(This content first appeared in Possibilities newsletter.)

JavaScript can be used to tell the browser to forget it ever displayed the current page and to load another page in the same window. If the browser's "back" icon works at all, it will skip over the current page.

Here is a demonstration:

The technique may be applied to, as examples:

• Removing a log-in page from history so the "back" icon won't work. This would prevent the browser from backing up and automatically refilling the log-in form fields like they were before.

• A one-guess quiz. When the response is selected, the browser takes the user to the next page to see if they won (or whatever). The browser won't back up to the page one-guess page for the person to try to change their response.

As you perceive, the technique has limited applicability. When it is used, however, it is quite effective in forgetting the location of the web page.

This is how to use it:

Make a link with a javascript: protocol or a button with an onclick attribute. The destination URL is the JavaScript location.replace() command with the destination URL specified as the replacement.

Here are two examples, one as a link and one as a button.

<a href="javascript:location.replace('https://spamfreeform.com/')">Go to Spam-free Form Website</a>

<input onclick="location.replace('https://spamfreeform.com/')" type="button" value="Tap me">

Replace https://spamfreeform.com/ with the correct destination URL, and you are good to go.

When the user taps the link or the button, the browser will first forget it was at the web page and then load the web page at the destination URL.

(This content first appeared in Possibilities newsletter.)