Text link distinction

Question

I am working on on a site which uses a hover state on a link within copy (a window pops up, much like a tool tip) as well as a standard link (which takes the visitor to another page).

The distinction is that the hover link is identified by having a perforated line running underneath it and the standard link has the standard 'underline'.

As these links have two distinct differing actions is there any best practice or reading material which suggests they should look visually different?

Just for info - I believe the text links should be handled differently as they have separate actions and behave differently.

Cheers

Answer 1

To the other good suggestions in this thread, I'd recommend altering the cursor (via CSS) for those tooltip links.

a.tooltip {
    cursor: help;
}

The "help" cursor type is applied frequently around the web for tooltip links, acronyms with a title attribute that's displayed on hover, and so on.

See http://css-tricks.com/almanac/properties/c/cursor/ for a comprehensive list. Also note that you can use a custom image as your cursor, which might be preferable to the question mark appearance of the "help" cursor in your application.

Answer 2

As I interpret the question, you will display sentences of text where segments in the text can be either normal links or hover elements which aren't links but triggers a small popup to show adjacent to the element when hovered.

It's well known that normal links should be cued with an underline and a differing (usually blue) colour, however the hover links with a dashed underline are not that well known amongst the general public. You almost have to have some association with the web designer field to know of that convention. Therefore I would suggest that you, in addition to adding a dashed underline (or skipping the dashed underline altogether), also display an indicator which cues that the item is expandable: ▼.

Here's a link to the unicode ID of the triangle.

Here's an example of how it could look:

On hover:

The expandable indicator is conventional, and most users will recognize it and successfully interpret that the element holds some additional info that will appear on either hover or click.

Answer 3

Different actions should be differentiated because the user likely has one expectation for each affordance's outcome. For best practices, there's a thread that discusses tooltip usage. This may not compare tooltips to links (loosely does), but it should highlight that tooltips are often displayed differently to begin with.

To borrow from that thread, Glen Lipka posted this image to highlight a few common patterns for signifying a tooltip.

It sounds like you are already using the dashed underline. You haven't provided any reference for what the tooltips are being used for (icons on the site, definitions, abbreviations, etc.), but this may affect which route you go in addition to following a completely different route to display hidden information.

Answer 4

It depends on how long these hover links are (one word, few words, whole sentence). If it more than a few words, consider a different approach, such as an inline icon, or an icon in the margin that is clearly tied to the text.

If it is just one or two words, and they are used sparingly, then consider using something like the tags appear on this very page. Look under your original question and imagine those tags appearing inline in the text. They would draw the eye, if that's your goal.

If your goal is to keep it subdued or there will be lots of them, like dictionary definitions for words, then stick with the dotted underline.