- This topic is empty.
September 29, 2013 at 5:19 am #151622
Normally abbr titles are shown on hover. I’d like to be able to view them on touch screen devices too. I’ve come up with this solution:
which utilises an empty anchor inside abbr. It works but there are at least two problems:
- Titles are shown twice on mouse hover.
a:afteris positioned absolutely, relative to
abbr. It can still overflow
bodyand thus be inaccessible if there’s not enough space on the right side of it.
What do you think? Is there any better solution to show titles without relying on hover?September 30, 2013 at 1:47 am #151668
You’re right about using
hover. It seems to do the job – the special tool tip is displayed only when clicking / tapping on the link. Thank you :)
I’m not really sure about putting span text inside the
abbrtag which by definition should include only abbreviations…October 7, 2013 at 6:26 am #152207
This is the final result at the moment:
after a little bit of simplification.
This way it’s fully accessible for keyboard users but I still don’t know how to deal with abbreviations which are real links at the same time, as clicking on them redirects you to another website, thus the tooltip is shown only for a very short time.October 7, 2013 at 10:46 am #152227
Yes, that’s the problem. You can see the tooltip for a very short time before being redirected to the other site.
I’ve seen several solutions which used an additional span element that blocked the link until clicked so that you had to click twice in order to be redirected. I don’t really think such a method is good though.
- The forum ‘CSS’ is closed to new topics and replies.