I have a simple table showing the configuration of various installs of a product. This particular product enables different profiles that enable/disable features and options. In this table, for each instance of an install, I list each of the profiles enabled. I want to use a popover to show some of the settings for that profile.

My question, then, is this: How can I best show the user that they can hover for more information? I originally thought to make it appear as a link, but would this confuse it for being clickable? I know the default <abbr> tag adds a dotted underline, is this the standard?

For example, listing profiles like so (ignore other data):


download bmml source – Wireframes created with Balsamiq Mockups

  • Are any of your users going to expect your table to work on devices that have no native hover capability such as 99.96% of phones and tablets unless it's a Galaxy Note with the S-Pen hover detection?
    – MonkeyZeus
    Sep 18, 2014 at 18:49

3 Answers 3


Add an info icon next to the name and display a popup, on hover or click, to display any extra information.

enter image description here


  • The items that need the popups are each profile. For example the first row both default and alpha should have a (different) popup when hovering. Do you think having the info icon next to each would be a good solution? Sep 18, 2014 at 17:43

I would personally opt for making each profile item click-able and in the column header you can write something like:

Profile (click a profile to view settings)

And now inside the popover() you can show the details.

Hover is not 100% accessible across all platforms.


A dotted underline can also indicate that the mouse should hover (whereas a solid line means to click). This is the approach taken by the <abbr></abbr> tag in HTML.

To get a dotted underline you can use the following CSS:

[element] {
    text-decoration: none;
    border-bottom: 1px solid #000;

Obligatory JSFiddle.

  • 1
    You've not really covered off anything the user hasn't already stated in the question. Do you know whether users actually understand dotted underlines as meaning hover? And anyway, the <abbr> is for abbreviations not for hovering for more information. Re-appropriate it for another purpose will confuse screenreader users.
    – JonW
    Sep 18, 2014 at 22:47
  • I don't think that it will be confusing to users. I certainly don't think that the code should be wrapped in <abbr> tags, but the mental processes involved are enough the same: A dotted underline should tell a user that more information can be found by hovering over the text. As far as I know, the text needs to be wrapped in an <a> tag for accessibility.
    – sqdge
    Sep 18, 2014 at 22:55

Your Answer

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

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