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:
Here's the span tag in action via Giphy:
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:
Courtesy of Giphy, here's the mouseover text in action, as created using the <a> tag:
The text is hyperlinked, which can be fixed by applying style tags with additional attributes.
Written by Louella Lugo, Marketing Success Manager