Indicate ”hoverable” text

Question

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, ..”

Answer 1

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:

...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:

---

_{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.}

Answer 2

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.

Hovering on "i" will display you info.

Answer 3

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.