HTML Tag ABBR – wie man Erklär-Popups mit HTML und CSS erstellen kann

von | Mrz 16, 2023 | Design | 1 Kommentar

Schlagwörter: HTML - Webdesign

Inhaltsverzeichnis

Es gibt immer wieder HTML Tags die sind fast unbekannt für die meisten Webentwickler. Entweder weil sie seit Urzeiten funktionieren oder weil sie eher zu den neueren Entwicklungen gehören. Ja, denn auch HTML wird dauernd weiter entwickelt wie auch CSS und alle anderen Programmiersprachen.

Heut möchte ich euch ein sehr praktisches Urgestein erklären, damit kann man nämlich sehr spannendes machen. So kann man mit dem ABBR Tag kleine Erklärungen machen. Ihr könnt so Wörter direkt erklären und müsst nicht gleich ein Glossar führen.

Video

HTML

1
Ich bin <abbr title="Verfasser von Blog-Beiträgen">Blogger</abbr> aus der Schweiz

CSS

Einfärben

Man kann natürlich einfach den Inhalt des ABBR Tags einfärben, dafür verwendet man das hier

1
2
3
abbr {
        color: red;
      }

Will man aber auch das PopUp Stylen kann man das hier verwenden

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
abbr { color: red; }
 
abbr[title] {
        position: relative;
 
        /* ensure consistent styling across browsers */
        text-decoration: underline double;
      }
 
      abbr[title]:hover::after,
      abbr[title]:focus::after {
        content: attr(title);
 
        /* position tooltip like the native one */
        position: absolute;
        left: 0;
        bottom: -30px;
        width: auto;
        white-space: nowrap;
 
        /* style tooltip */
        background-color: #1e1e1e;
        color: #fff;
        border-radius: 3px;
        box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
        font-size: 25px;
        padding: 3px 5px;
      }

1 Kommentar

  1. Kurt Schneider

    Guten Tag,
    Ich finde dein Kommentar sehr hilfreich.
    Nun aber habe ich eine Frage.
    Wenn ich den Text von „PopUp Stylen“ kopiere und es in meiner html Seite einfüge, den erscheint das neue PopUp im neuen Style. Jedoch erscheint ebenso das PopUp, welches nicht im neuen Style ist. Also habe ich zwei PopUp. Wie ist es möglich, dass nur das PopUp im selber gemachten Style, also gemäss deinem Text, erscheint. Lässt sich das automatische PopUp unterdrücken?
    Danke für die Antwort.
    Freundlich grüsst
    Kurt

    Antworten

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert