TL; DR - Siehe Adams Antwort (akzeptiert) oder Update # 5 in meinem Frage nach der aktuellen Lösung. Meine Frage zeigt meine Reise zu dieser Lösung auf eine ziemlich lange, aber erklärende Weise, Tücken und Einschränkungen zu beschreiben.
Ich erstelle ein Modul, das den jeweiligen Wörtern, die in einem Text verwendet werden, Glossarbegriffsbeschreibungen hinzufügt. Alles funktioniert gut mit Klartextbeschreibungen. Zum Beispiel, wenn es eine Beschreibung für onomasticon (ein anderes Wort für Thesaurus) gibt, das folgende HTML
%Vor%wird in
konvertiert
Da der Inhalt (sowohl Artikeltext- als auch Glossarbegriffsbeschreibungen) aus einem CMS stammen, das es dem Benutzer erlaubt, HTML zu verwenden, kann die Beschreibung des Begriffs HTML enthalten, z. %Code%. Unter Verwendung der obigen Technik beginnt dies unordentlich zu werden:
Dies ist standardmäßig, da Tag-Attribute selbst keine Tags enthalten dürfen. Diese Einschränkung kann umgangen werden, indem ein zusätzliches Element innerhalb des Another word for <strong>thesaurus</strong> -Tags hinzugefügt und CSS hinzugefügt wird, um das Element anfänglich auszublenden:
Aber jetzt kommt der Teil, den ich nicht überwinden kann. HTML-Tags wie dfn sind Inline-Elemente, die kein Problem darstellen. Wenn jedoch die Beschreibung des Begriffs ein Blockelement enthält, schlägt dies z.B. Wenn die Beschreibung selbst in einem <strong> -Tag enthalten ist:
Was passiert hier? Nun, da Blockelemente in den meisten Inline-Elementen nicht erlaubt sind, wird das äußere Inline-Element abgeschlossen und das innere Blockelement wird direkt danach platziert. Daher funktionieren die CSS-Selektoren nicht mehr und Sie erhalten zusätzliche Zeilenumbrüche. Natürlich könnte man daran denken, etwas wie <p> hinzuzufügen, aber das funktioniert auch nicht (auch nicht dfn span p { display: inline-block; } ), es ist ein ungültiges HTML5.
Obwohl semantisch inkorrekt, habe ich versucht, inline in <dfn> und das Innere <div class="dfn"> in ein <span> zu verwandeln, da dfn, abbr und cite auch nur einen Phrasierungskontext enthalten (genauso wie span) . Dies schlägt erneut fehl, da <div> nicht in <div> erlaubt ist. Es wird wieder ein unerwünschter Zeilenumbruch hinzugefügt:
Das war die Zusammenfassung meiner bisherigen Reise und ich versuchte den Heiligen Gral zu erreichen, indem ich einen Tooltip mit HTML zu einem Inline-Element - wie zB <p> , <dfn> oder <abbr> - hinzufügte, nur mit CSS .
Bevor ich nun in Javascript-basierte Lösungen schaue, ist meine Frage, ob ich eine Option verpasst habe, die meine unten aufgeführten Anforderungen erfüllt?
<cite> , <dfn> oder <abbr> in einem Absatz Update 1: Da ich das Modul (PHP) geschrieben habe, kann ich natürlich die Beschreibung des Begriffes manipulieren. Ich möchte jedoch nicht nur alle <cite> -Tags entfernen, sondern auch versuchen, das gewünschte Markup beizubehalten.
Update 2: Ich fand eine ziemlich grobe Lösung. Nehmen wir an, die Beschreibung für <p> ist ein HTML-Code wie:
Mein Modul wird jetzt alle Blockelemente in Spannen mit geeigneten Klassennamen konvertieren, so dass die Beschreibung
wird %Vor% Auf diese Weise habe ich Inline-Elemente, die den Phrasierungskontext nicht durchbrechen sollten. Wenn du noch mehr CSS hinzufügst, um den Tooltip zu stylen und onomasticon wieder wie ein span.p zu machen, endet alles damit.
Dies ist meine bisher am besten aussehende Option, die begrenztes HTML für Inline-Element-Tooltips unterstützt. Es ist jedoch wahrscheinlich nicht die beste Option, da es das hackige Umschreiben von HTML-Blockelementen erfordert.
Update 3: ChristianFs Antwort hatte einen sehr wichtigen Anhaltspunkt dafür, wie man HTML in Glossarbegriffsdefinitionen erhalten kann. Wenn die Beschreibung kein Element innerhalb des dfn-Tags ist, sondern ein nachfolgendes Geschwister, könnten wir es immer noch verstecken und anzeigen, z. mit dem CSS-Selektor p .Da jedoch die meisten Glossarbegriffe in einem Phrasierungskontext gefunden werden, wird dies das Layout wieder aufheben, da divs in einem Absatz nicht zulässig sind.
Wir brauchen also ein Element, das sowohl in einem Phrasierungskontext als auch in Blockelementen verwendet werden kann. Gemäß diesem schönen HTML-Strukturdiagramm wäre das dfn + div.dfn-tooltip -Tag das einzig geeignete.
Das sieht ziemlich vielversprechend aus. Natürlich gibt es zwei wesentliche Nachteile: (1) Ein Button-Element an dieser Stelle ist semantisch inkorrekt und (2) der Tooltip bleibt nicht geöffnet, wenn er sich selbst schwebt, da er kein Kind des dfn-Tags mehr ist.
Update 4: Einen weiteren Schritt weiter zu gehen, um den zweiten Nachteil zu vermeiden, ist, das Button-Element einfach wieder in das dfn-Tag zu verschieben, da der Kontext derselbe ist.
Update 5 (final): Adams Antwort brachte eine nette Technik hervor, um die ursprüngliche Intention des Titelattributs zu integrieren, alles zusammen zu setzen, das ist es, was ich letztendlich gefunden habe.
Übrigens, wenn jemand daran interessiert ist, verwende ich dies in einem Modul namens Onomasticon , das eine Basis bietet Glossar-Funktionalität für Drupal 8.
Beachten Sie, dass W3C sagt:
Definition des Begriffs: Wenn das Element dfn ein Titelattribut hat, wird der genaue Wert dieses Attributs definiert .
Dementsprechend können Sie eine einfache Lösung haben, bei der Sie den Begriff innerhalb des Attributs title und die Definition innerhalb von
Ich finde kein Tag, das hier das button Element ersetzen könnte, das hier als einziges arbeitet.
Also müssen wir dem disabled -Element das button -Attribut hinzufügen, um dessen button -Verhalten (Fokus) zu deaktivieren, und den tabindex für das dfn -Element, um die Pfeilnavigation zu aktivieren.
Wie bereits in den Kommentaren festgestellt, besteht der einfachste Weg darin, einfach die p -Tags durch etwas anderes zu ersetzen. Dies erfordert die geringste Problemumgehung und daher ist der Ansatz am wahrscheinlichsten zu brechen.
Am schnellsten ersetzen Sie einfach das öffnende p -Tag durch zwei br -Tags und das Schließen durch einen leeren String. Auf diese Weise erhalten Sie eine sichtbare Leerzeile zwischen den beiden Textblöcken, ähnlich wie bei einem Absatzbruch normalerweise. Meistens ist dies genug, um die Illusion eines Absatzbruchs zu erzeugen.
Eine andere Lösung ist, wie Sie herausgefunden haben, diese durch Span-Tags zu ersetzen und diese so zu gestalten, dass sie sich genau wie ein normales P-Tag verhalten. Dies erfordert ein bisschen mehr Code und Arbeit, aber hat den Vorteil, sich zu verhalten, gut ... Genau wie die Absätze auf Ihrer Website, Erstellen einer perfekten Illusion von dort tatsächlich ein Absatz zu brechen Dies ist die Methode, die ich verwenden würde, wenn die Absätze auf eine ungewöhnliche Art und Weise gestaltet wären, so dass eine einfache leere Zeile nicht ausreichen würde, um die Illusion zu erzeugen. Zum Beispiel, wenn die erste Zeile eingerückt ist, spezielles Styling für das erste Zeichen oder so.
In Ihrem Fall würde ich eine einfache doppelte br ausreichen. Da Sie nur einen .5em unteren Rand für Absätze haben.
Bearbeiten, hinzugefügt:
Angesichts Ihres Kommentars zu meiner Antwort habe ich noch eine Idee. Dies ist, um ein verstecktes div zu erstellen und den Kommentar in diesem zu speichern. Geben Sie ihm eine ID, die einem rel -Attribut des dfn -Tags entspricht. Verwenden Sie dann CSS und JS, um das DIV als QuickInfo beim Hover zu formatieren. Benötigt ein wenig mehr Arbeit, aber es wird Ihnen erlauben, alle Formatierungen und Tags ohne Probleme zu erhalten.
Für diejenigen, die die erforderlichen Funktionen nicht unterstützen, können Sie eine abgespeckte Version innerhalb des Titel-Tags verwenden. Verwenden Sie dann dasselbe JS, um es zu unterdrücken, wenn Sie den "erweiterten" Tooltip anzeigen.
Aber ja, Sie suchen JS auf jeden Fall hier. Es sei denn, Sie können mit dem Selektor für benachbarte Geschwister
auskommenIch habe das Objekt-Tag verwendet. Es macht mehr Sinn für mich, weil Sie die Informationen in Ihren Text aufnehmen.
Eine andere Lösung, die es sich zu überlegen lohnt, wäre die Verwendung von reinem CSS in Kombination mit nur dem Element. Vergiss den Titel oder füge ihn einfach hinzu.
Wenn Sie es sich leisten können, Inline-CSS zu generieren und zu verwenden und es in den Kopf zu injizieren, bevor die Ausgabe geliefert wird, wie wäre es dann mit:
The <abbr id="abbr_1" title="Fox is an animal">fox</abbr>. Another <abbr id="abbr_2">word</abbr>
Vergessen Sie nicht, den einfachen Anführungszeichen zu entkommen;)