5

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

4 Answers 4

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.

0

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:

enter image description here

On hover: enter image description here

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.

3
  • Thanks for that, you have interpreted that absolutely right. I know the hover link should definitely have a clear identifier and your example answers that question. Just for info - the two different links wont appear in close proximity to each other. Thanks
    – Tommisauce
    Oct 3, 2013 at 7:36
  • @Tommisauce Ok, I don't think the lack of close proximity between the elements will pose a problem. The elements cues different behaviour, so a user will be able to interpret how they work without having them presented close to each other. Oct 3, 2013 at 8:11
  • As someone who just now read the question and response, I would never make the connection that a tiny Unicode arrow next to the text means there would be a pop-up. I think the bigger question is why there are two types of data/interaction that are so closely linked visually/graphically. Bound by keyword or not, are these two things so similar such that you're trying to force an indicator into it, or should they be more visually distinct?
    – Brad Orego
    Oct 6, 2013 at 6:21
0

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.

enter image description here

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.