Mouseover text is one of those little underutilized tricks that many people don't think about when creating web content. In a nutshell, mouseover text is the text that pops up when your mouse hovers over a trigger area.

There are two ways to add mouseover text with HTML, and we will be looking at these methods in the context of the HTML component in the ClickDimensions form builder:

1. Using <SPAN> tag

In a form's HTML component, click the Source button to view the source code. The text that displays when hovering should be enclosed in <span> tags. The mouseover text will specifically be placed as a value for the span's title attribute. For example:

<span title="We promise not to spam you">Privacy Policy</span>

The text on the form says "Privacy Policy" and the mouseover text is "We promise not to spam you."

Here's the span tag in action via Giphy:

Mouseover 1


2. Using the <A> tag

The <a> tag denotes either a hyperlink or an anchor, and in this example, we're creating a link with an empty reference attribute so that clicking on the text doesn't take you to another webpage. Since this is technically a link, it will need a location as well. The href attribute is given a blank value so as not to provide an actual URL. The title attribute is used to create the mouseover text. For example:

<a href=" " title="We will not spam you.">Privacy Policy</a>

Courtesy of Giphy, here's the mouseover text in action, as created using the <a> tag:

Mouseover 2

The text is hyperlinked, which can be fixed by applying style tags with additional attributes.

The examples above use the mouseover text to provide additional information concerning the collection of email addresses without overcrowding the page with additional text. Consider using this method for your lead capture forms so that future email recipients are aware of your privacy policy. And there are many other ways that you can use this neat little trick to improve your marketing pieces!

Happy Marketing!

Written by Louella Lugo, Marketing Success Manager