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:

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

Answer 1

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!

Answer 2

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/