2

In our (web) application, we want tooltips (read: title attributes) that also indicate shortcuts for buttons. We have some button that involve the cursor ('arrow') keys.

We've tried using characters like ⬅ and ←, but they just don't look right. We've also tried spelling it out, e.g. "Left Arrow Key", but that's a bit verbose.

What's a good way to do this?

Improve this question
1
  • 3
    If you want greater flexibility, consider creating custom tooltips in CSS or javascript and falling back to title attributes for accessibility reasons (unless you're asking for accessibility reasons in the first place).
    – Rahul
    Dec 20, 2010 at 16:44

4 Answers 4

Reset to default
1

Maybe you could try a dingbat font with actual keyboard keys? Something like this:

alt text

Improve this answer
2
  • 1
    I like the look… but is it even possible to change the font used for the html title attribute? Also, are those fonts available on every system?
    – Sietse
    Dec 20, 2010 at 11:22
  • You are right. I simply did not understand the part where you wanted this in the page title of your html document. Sorry.
    – fluxd
    Dec 20, 2010 at 13:42
1

Tooltips from the basic 'title' attribute are very limited and not your best option: browsers may or may not pop them up as you expect them.

I think @Rahul comment is very good in this regard: you may want to look at a more complete tooltip solution. There's plenty of pre-made libraries to give you more flexible, solid and appealing tooltips that the basic 'title' attribute.

If you are looking at the title attribute for accessibility reasons (as a fallback option from more complex tooltip solutions), then I think the verbose option ('Press Left Arrow Key to...') is your best option: a screenreader would read it out nicely.

Improve this answer
0

What's wrong with your first icon? It looks almost perfect, to me. Of course, it would be better to see it in the context of your other 'key shortcut' icons, but it looks very much like it will convey the important info., namely 'this is the left cursor key'.

If you want to be extra clear, you could colour it beige according to the fact that it's the most likely colour of the key the user will press. Maybe some shading and reshaping of the icon would help to emphasise its 'key-ness'.

Improve this answer
2
  • The first icon doesn't work because of the missing 'key-ness'. Also, we're using the title attribute, so I don't think we can shade or shape the characters.
    – Sietse
    Dec 20, 2010 at 11:05
  • I don't really get the color comment though… are you referring to the actual keyboard key? In that case, isn't it more likely to be black?
    – Sietse
    Dec 20, 2010 at 11:25
0

If you move beyond using the title attribute and instead utilize a CSS solution, you could actually provide both a small image of the keyboard key as well as a short description below it. There are a huge collection of very interesting web pages and example images of "CSS Keyboard Key images" use that phrase in a Google Image search for starters here is an erudite page by somebody who cracked the way it is done on Stack Overflow pages see:-

http://www.jimmyscode.com/css-styling-for-kbd-tags/

Improve this answer

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.