4

I have a table with “hoverable” text, but how do I make it clear to the user that more information will show up if he hovers over it?

I was thinking of an icon at first, but I don’t know if it is very good-looking with an icon after (or before) the text on each row in a table.

Is there another way to indicate this?

Edit:

Table example: 1 Shirt Red Cotton Long sleeved

And the additional information being about the Cotton value, “Cotton is a soft, fluffy staple fiber that grows in a boll, ..”

  • 2
    Have you got any visual examples to illustrate how it looks currently? Also, I'm assuming you're already aware that using hover to display additional information isn't really the most accessible solution. What sort of content does the hover display? – JonW Apr 12 '16 at 10:35
  • No, unfortunately I don’t have any visual example, just a plain table. The content of the additional information is not really connected to the content in the table. It’s more of a “good-to-know” thing about a specific value in the row. Table: 1 Shirt Red Cotton Long sleeved And the additional information being about the Cotton value, “Cotton is a soft, fluffy staple fiber that grows in a boll, ..” – efrethe Apr 12 '16 at 10:49
  • It's worth considering that on many mobile and touch devices 'hover' is not a state that exists due to the fact that there is no mouse. Some devices (mainly Apple in my experience) work around this by adding the first click as the hover, and the second as the selection. Just a thought :) – J4G Apr 12 '16 at 14:31
5

A fairly standard method of indicating "extra information available" is with a dashed or dotted underline. This may change the cursor to a "Help" cursor, which might look something like this:

Windows Help cursor

...which would allow a click to bring up additional information.

One method I use is a dotted underline with a popup on mouseover, which (with some styling) looks like this:

Example popup


My popup uses Erik Bosrup's OverLIB Javascript library. The standard "Help" cursor and dotted underline is usually implemented using the <ABBR> tag. That does mean it's semantically wrong to use it for anything else, but CSS classes can do the same thing.

3

If data is important for the users to know, I suggest you not to use hover.

Use a modal with the details. And if you want user to click place a text down the table "Click on items to view more info." Text can be put on hover also but on hover he couldn't able copy text, say if he wants to do for some reason.

You can also use a small icon of "i" for more info.

enter image description here

Hovering on "i" will display you info.

  • Well, the information is important in itself, however not really related to the content on the page (except that specific value in the table). The text will not be clickable, only “hoverable”. I like the icon suggestion, but don’t you think it will look cluttered with an icon on each row? – efrethe Apr 12 '16 at 11:48
  • Will this ever be accessed from a touch device like tablets or smartphones? If so, then don't use hover because it will not work on touch devices. I personally prefer click triggers because this can be used everywhere, by anyone, irrespective of whether they use a mouse or keyboard, or finger. – SteveD Apr 12 '16 at 12:48
  • @tessfred No I don't think it will look cluttered. 'Coz it is just an small icon if incase it looks cluttered we can make it in some light grey in color. – Abhishek Sharma Apr 13 '16 at 3:44
0

If it is going to provide an additional information about that field you can use underlined text with some nice color.

Also using chevron right icon at the very end of each row for particular field will be a good option. It will allow user to understand that there is more on click.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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