Prevent Hiding Abk Tooltip auf Click

Question

Wenn ich das <abbr> Element verwenden, ich in der Regel eine punktierte Grenze unter der Abkürzung hinzufügen, um anzuzeigen, dass weitere Informationen zur Verfügung:

Der Tooltip etwa zwei Sekunden dauert, erscheint *, und da es nicht unmittelbar ist, scheint es natürlich, dass ein Benutzer auf den Text klicken würde (besonders, da er einem Link ähnelt).

Wenn Sie jedoch auf die Abkürzung klicken, wird die QuickInfo ausgeblendet, wenn sie bereits sichtbar ist, und verhindert, dass sie angezeigt wird, wenn sie noch nicht angezeigt wurde.

Gibt es eine Möglichkeit, dieses Klickverhalten zu verhindern?

habe ich versucht, die offensichtlich ohne Glück:

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

(*) - 2 Sekunden in Chrom, etwa 1 Sekunde in Firefox

Answer 1

Hier ist die beste Option ist, die ich finden konnte. Bereitgestellt von Andres Ilich auf dieser SO question.

(Die Frage, die er beantwortet hat, bezieht sich nicht auf diese Frage, aber die Art, wie er dieses Element strukturiert, löst tatsächlich dein Problem.) (Dies ist nicht meine Arbeit, Andres Ilich fand diese Antwort, teilte einfach das Wissen:} Für Meine Version beziehen sich auf die Unterseite)

Was er tut, ist das Styling der a Eigenschaft mit der Verwendung von Pseudo-Elementen. Wenn das Element angeklickt wird, versteckt es nicht das :after Element und ist eine nette Arbeit um dies zu tun.

(Er wird mit dem Titel Wert Eingang in die content: ""; das war ziemlich cool!)

Hier ist der Code, der in einen neuen Titel ergänzt:

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); 
} 

Seine Fiddle: JSFIDDLE

Das einzige Problem von diesem ist der grundlegende Titel, der noch angezeigt wird, aber ich konnte keine bessere Abhilfe dafür finden. Die einzige andere Option, die die Eigenschaft title nicht verwendet, ist der Vorschlag, den ich als Kommentar hinterlassen habe.

Dies ist meine Version der Verwendung der value Eigenschaft anstelle der title, um den Wert hinzuzufügen. Dies hat nicht zwei Tool-Tipps Pop-in und erhält immer noch den gewünschten Effekt.

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

Mein Fiddle: JSFIDDLE

Prost!

Answer 2

Ich denke, der einzige Weg, um zu bekommen, was Sie wollen, wäre die Standard-Tooltip-Aktion zu ersetzen. Josh Powells Post enthält eine nette CSS-Lösung. Es gibt Javascript-Lösungen wie: http://jqueryui.com/tooltip/