Prevent Hiding Abbr Tooltip on Click

Question

When I use the <abbr> element, I typically add a dotted border under the abbreviation to indicate that more information is available:

enter image description here

The tooltip takes around two seconds to appear*, and since it's not immediate, it seems natural that a user would click on the text (especially since it looks similar to a link).

However, clicking on the abbreviation hides the tooltip if it's already visible and prevents it from ever appearing if it hasn't yet been revealed.

Is there a way to prevent this click behavior?

I tried the obvious with no luck:

$('abbr').on('click', function(e) { e.preventDefault(); });

(*) - 2 seconds in Chrome, about 1 second in Firefox

Here is a work around with css hover states, http://jsfiddle.net/g6KeH/. I'm still tryign to figure out an answer for the `title` property. — Josh Powell, Dec 19 '13 at 19:42
Do you actually have data showing that your users are in fact clicking on the text instead of waiting for the tooltip? While abbr is not commonly used, I don't see any reason to believe users will click on it believing that it is a link. — cimmanon, Dec 19 '13 at 19:48
Well Hopefully someone can provide a better option then I did but that was the best I found and altered. Best of luck! — Josh Powell, Dec 19 '13 at 20:02

score 1 · Accepted Answer · edited May 23 '17 at 12:03

Here is the best option I could find. Provided by Andres Ilich on this SO question.

(The question he answered doesn't pertain to this question but the way he structure this element is actually solving your problem.)(This is not my work, Andres Ilich found this answer, just sharing the knowledge :} For my version refer to the bottom)

What he is doing is styling the a property with the use of pseudo elements. If the element is clicked it does not hide the :after element and is a nice work around to this.

(He is using the title value to input into the content: ""; which was pretty cool!)

Here is the code that adds a new title in:

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

His Fiddle: JSFIDDLE

The only problem from this is the basic title still shows but I could not find any better workaround for this. The only other option that does not use the title property is the suggestion I left as a comment.

This is my version of using the value property instead of the title to add the value in. This does not have two tool-tips poping in and still gets the desired effect.

<a href="#" value="This is another link">Mauris placerat</a>

My Fiddle: JSFIDDLE

Cheers!

Thanks Josh - your `content: attr(value);` technique is really clever. A good fallback option if there's no cleaner way. — cantera, Dec 19 '13 at 20:03
No problem! Hopefully you find a better solution but my best guess is this option or InvisibleBacon's option is about the only way to get around it's default styles. — Josh Powell, Dec 19 '13 at 20:07

score 1 · Answer 2 · answered Dec 19 '13 at 20:02

1

I think the only way to get what you want would be to replace the default tooltip action. Josh Powell's post includes a nice CSS solution. There are javascript solutions such as: http://jqueryui.com/tooltip/

answered Dec 19 '13 at 20:02

InvisibleBacon

3,137
26
27

Prevent Hiding Abbr Tooltip on Click

2 Answers2